|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
純CSS：鼠標(biāo)移上后，鏈接按鈕顏色顯示漸變效果
作者:admin 時(shí)間:2022-8-4 9:12:35 瀏覽:鼠標(biāo)移上后，鏈接按鈕顏色顯示漸變效果，這個(gè)設(shè)計(jì)很常見。今天，我介紹一下這個(gè)效果的實(shí)現(xiàn)方法，是用純CSS來實(shí)現(xiàn)的。
完整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='#'>這是一個(gè)鏈接，鼠標(biāo)移上來。</a>
</body>
</html>
代碼分析
1、背景顏色
下面CSS語句設(shè)置鏈接按鈕的背景顏色。
background: linear-gradient(90deg, #b828d1, transparent) #0085ff;
如果沒有這句，那么鼠標(biāo)懸停效果會(huì)變成這樣。
2、過渡時(shí)間
下面這句設(shè)置過渡時(shí)間，是背景顏色變成漸變的過渡時(shí)間：0.65s。
transition: background-color 0.65s;
3、鼠標(biāo)懸停顏色
下面這句設(shè)置鼠標(biāo)懸停后，按鈕的顏色。
a:hover, a:focus {
background-color: #46ffd7;
}我們可以更改這個(gè)顏色值（#46ffd7），自定義自己喜歡的顏色。
相關(guān)文章
- 30個(gè)漂亮的CSS漸變按鈕，鼠標(biāo)滑過(hover)動(dòng)畫效果
- CSS3顏色漸變按鈕 鼠標(biāo)劃過變色
- CSS3實(shí)現(xiàn)漸變/立體/扁平的漂亮按鈕
- 帶有浮動(dòng)占位符(Placeholder)和光亮按鈕的登錄表單
相關(guān)文章
- 4款CSS 3D按鈕點(diǎn)擊過渡效果
- 16款精美的CSS3動(dòng)畫按鈕（有懸停動(dòng)畫效果）
- 帶有浮動(dòng)占位符(Placeholder)和光亮按鈕的登錄表單
- 6個(gè)CSS按鈕邊框過渡動(dòng)畫效果
- 一個(gè)具有伸縮（鼠標(biāo)懸停）效果的CSS按鈕
- 使用box-shadow實(shí)現(xiàn)的7個(gè)按鈕懸停效果
- 簡單又好看的CSS單選按鈕(radio)樣式
- 30個(gè)漂亮的CSS漸變按鈕，鼠標(biāo)滑過(hover)動(dòng)畫效果
- CSS3顏色漸變按鈕 鼠標(biāo)劃過變色
- CSS3實(shí)現(xiàn)漸變/立體/扁平的漂亮按鈕
- 漂亮的純CSS3開關(guān)按鈕 (UISwitch)
- 【8個(gè)實(shí)例】純CSS按鈕(button)，簡單漂亮實(shí)用
- CSS懸停效果按鈕一簡單實(shí)例（鼠標(biāo)移到按鈕上變成其他顏色）
- 很好看的css3動(dòng)畫按鈕鼠標(biāo)懸停效果【2個(gè)實(shí)例】
- 漂亮懸停效果的CSS3動(dòng)畫按鈕【5個(gè)實(shí)例代碼】
x
- 站長推薦
