當需要改變html的按鈕文字時,可以試著加入CSS去調整,
這樣也方便未來在不同需求的變更,
範例如下:
<p style=”text-align: center;”><span style=”font-size:12px;”>
<a class=”button buttontop” href=”你的連結”>你的按鈕文字</a> \\ button用於改變按鈕上的文字屬性
<a class=”button buttontop“href=”你的連結”>你的按鈕文字</a> \\ 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>