|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
純CSS：鼠標移上后，鏈接按鈕顏色顯示漸變效果
作者:admin 時間:2022-8-4 9:12:35 瀏覽:鼠標移上后，鏈接按鈕顏色顯示漸變效果，這個設計很常見。今天，我介紹一下這個效果的實現方法，是用純CSS來實現的。
完整HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
display: grid;
}
html {
height: 100%;
}
body {
place-content: center;
background: #0e0b12;
}
a {
padding: 0.875em 2em;
border-radius: 1.5em;
background: linear-gradient(90deg, #b828d1, transparent) #0085ff;
color: #fff;
font: 600 1.25em/1.25 ubuntu, sans-serif;
text-decoration: none;
text-shadow: 1px 1px #000a;
transition: background-color 0.65s;
}
a:hover, a:focus {
background-color: #46ffd7;
}
</style>
</head>
<body>
<a href='#'>這是一個鏈接，鼠標移上來。</a>
</body>
</html>
代碼分析
1、背景顏色
下面CSS語句設置鏈接按鈕的背景顏色。
background: linear-gradient(90deg, #b828d1, transparent) #0085ff;
如果沒有這句，那么鼠標懸停效果會變成這樣。
2、過渡時間
下面這句設置過渡時間，是背景顏色變成漸變的過渡時間：0.65s。
transition: background-color 0.65s;
3、鼠標懸停顏色
下面這句設置鼠標懸停后，按鈕的顏色。
a:hover, a:focus {
background-color: #46ffd7;
}我們可以更改這個顏色值（#46ffd7），自定義自己喜歡的顏色。
相關文章
相關文章
- 4款CSS 3D按鈕點擊過渡效果
- 16款精美的CSS3動畫按鈕（有懸停動畫效果）
- 帶有浮動占位符(Placeholder)和光亮按鈕的登錄表單
- 6個CSS按鈕邊框過渡動畫效果
- 一個具有伸縮（鼠標懸停）效果的CSS按鈕
- 使用box-shadow實現的7個按鈕懸停效果
- 簡單又好看的CSS單選按鈕(radio)樣式
- 30個漂亮的CSS漸變按鈕，鼠標滑過(hover)動畫效果
- CSS3顏色漸變按鈕 鼠標劃過變色
- CSS3實現漸變/立體/扁平的漂亮按鈕
- 漂亮的純CSS3開關按鈕 (UISwitch)
- 【8個實例】純CSS按鈕(button)，簡單漂亮實用
- CSS懸停效果按鈕一簡單實例（鼠標移到按鈕上變成其他顏色）
- 很好看的css3動畫按鈕鼠標懸停效果【2個實例】
- 漂亮懸停效果的CSS3動畫按鈕【5個實例代碼】
x
