如何將標準文本標籤轉換爲懸停按鈕？

我想要一個顯示爲標準文本的按鈕，但是在懸停時轉換爲標準按鈕樣式。如何將標準文本標籤轉換爲懸停按鈕？

這就是我所謂的3D按鈕。換句話說，當您在html中創建標籤時，默認按鈕在大多數瀏覽器上出現。

我現在擁有的是：

button{ 
margin:5px; 
background-color:white; 
border:0px; 
} 
... 

<button > Home </button>

更新：在回答您的意見，產生一個從無到有的新的3D背景和邊框不正是我腦子裏想的（這是那種我的意思通過導入一個很明顯的圖像），但這可能會解決我的問題。這聽起來像沒有內置的方式來顯示默認的3D按鈕懸停，而不會產生新的圖像

編輯：爲了澄清我想按鈕去「默認樣式」（如上圖）徘徊。當沒有徘徊時，它應該出現在上面的CSS中 - 換句話說就是純文本。用「標準按鈕」替換任何提到的「默認3D按鈕」。

來源

2015-11-03 Nathan Fowler

你所說的「3D背景」是什麼意思？你有沒有你想要達到的例子？你知道你想要應用的CSS，只是現在如何讓它出現在懸停狀態？目前還不清楚你目前的障礙是什麼。 –

請添加您將用於使其顯示爲普通文本的CSS和HTML。 – RyanS

如果你只是想將樣式按鈕時，沒有鼠標懸停使用th e 否定僞類。

button:not(:hover) { 
 
    background: white; 
 
    border-color: white; 
 
    border-style: solid; 
 
}

<button>Home</button>

來源

2015-11-03 23:53:17 woestijnrog

偉大的答案！我也學到了一些新東西。 –

-1

這是一個非常基本的CSS按鈕。我只是使用內置的CSS：懸停效果，併爲錨元素添加了一些基本樣式。

#button { 
 
    text-decoration: none; 
 
    width: 45px; 
 
    height: auto; 
 
    padding: 5px; 
 
    } 
 

 
#button:hover { 
 
    border: 1px solid white; 
 
    border-radius: 5px; 
 
    background: -webkit-linear-gradient(white, silver); 
 
    background: -o-linear-gradient(white, silver); 
 
    background: -moz-linear-gradient(white, silver); 
 
    background: linear-gradient(white, silver); 
 
    box-shadow: 0px 9px 0px rgba(0,0,0,0), 0px 9px 25px rgba(1,0,0,1); 
 
    color: black; 
 
    }

<a href='#' id='button'>Click</a>

來源

2015-11-03 21:53:30 Jase

您可以將項目更改爲使用jQuery和Bootstrap按鈕。這將是最簡單的方法。

HTML：

<a class="centered" href="javascript:void(0);">Home</a>

CSS：

a{ 
    position: fixed; 
    padding: 5px; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
    color: black; 
} 

a:hover{ 
    text-decoration: none; 
} 

.btn-default{ 
    border: 1px solid grey; 
}

JS：

$('a').hover(
     function(){ $(this).addClass('btn-default') }, 
     function(){ $(this).removeClass('btn-default') } 
)

CODEPEN DEMO

來源

2015-11-03 21:55:43

我沒有想過產生一個新的背景，我認爲你需要導入一個圖像。如果您希望按鈕的外觀依賴於瀏覽器，即基於任何瀏覽器的默認按鈕，而不是以編程方式生成？ –

你可以在CSS中完成所有工作，如果你願意，你甚至可以應用漸變。不需要外部圖像！在演示中，我還應用了一個盒子陰影以給它更多的3D感覺。它們看起來是一樣的，這是標準的HTML和CSS。 –

我測試了除safari以外的所有瀏覽器上的3D按鈕，它們看起來都一樣。只是要確保XP –

如何將標準文本標籤轉換爲懸停按鈕？

回答

相關問題