2012年9月19日 星期三

[CSS] 製作類似按鈕的 link

原本的超連結 (<a>) 是會在內容下方產生底線,並要點選該連結內容才會有反應
可以加入以下的 CSS 樣式,就可以產生類似按鈕的效果,在框內都會有反應,不一定要點選文字才行

<style>
a {
    display: block;            /* 設為區塊模式 */
    background-color: #94B8E9; /* 定義按鈕顏色 */
    border: 1px solid black;   /* 按鈕邊框 */
    text-decoration: none;     /* 不產生底線 */
    text-align: center;        /* 將文字置中 */
    width: 300px;              /* 設定寬度 */
}

/* 滑鼠指到連結時改變按鈕顏色 */
a:hover {
    background-color: #369;
    color: #fff;
}
</style>
<body>
<a href="#">Button Link</a>
</body>

效果:
滑鼠移到按鈕上會改變顏色:

沒有留言:

張貼留言