HTML+CSS 滑鼠移上按鈕後變色

當需要改變html的按鈕文字時,可以試著加入CSS去調整,
這樣也方便未來在不同需求的變更,
範例如下:

<p style=”text-align: center;”><span style=”font-size:12px;”>
<a class=”button buttontop” href=”你的連結”>你的按鈕文字</a>&nbsp;&nbsp;               \\ button用於改變按鈕上的文字屬性
<a class=”button buttontop“href=”你的連結”>你的按鈕文字</a>&nbsp;&nbsp;                \\ buttontop用於改變按鈕屬性

 

<style type=”text/css“>.button {background-color: #fff;                   \\text/css    意思是在css資料夾下建立一個style.css,可以讓html導入在css資料夾下的CSS檔,為網頁提供變化。
text-decoration: none;
 color: #fff;
 padding: 5px 14px;
 text-align: center;
 display: inline-block;
 font-size: 52px;
 margin: 4px 2px;
 cursor: pointer;
 }
text-decoration  可用效果如下:

none 預設值,無額外文字特效
overline 文字增加上線特效
underline 文字增加底線特效
line-through 文字增加刪除線特效
 .buttontop {                                      //這裡的buttontop用於改變滑鼠不在上面時按鈕的屬性
 background-color: #fff;
 color: black;
 border: 1.5px solid #f5b6cd;
 border-radius: 20px;
 }
 .buttontop:hover {                      //這裡的buttontop多了hover,用於改變滑鼠在按鈕上的屬性
 background-color: #f5b6cd;
 color: white;
 border-radius: 20px;
 opacity: 0.25;                              //opacity 用於改變按鈕透明度 範圍:0.0~1.0
 }
</style>
</p>

Author: admlplmaduty

發佈留言