卡卡網(wǎng)

今天給大家分享一些漂亮的CSS漸變按鈕，鼠標(biāo)滑過(hover)后有動(dòng)畫效果，這些按鈕UI設(shè)計(jì)，在很多網(wǎng)站上都使用著，讓交互瞬間變得不再呆板。

CSS漸變按鈕

demodownload

CSS

.btn-grad {background-image: linear-gradient(to right, #16A085 0%, #F4D03F  51%, #16A085  100%)}
.btn-grad {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}
.btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
button {
    cursor: pointer; 
}

HTML

<button class="btn-grad" >鼠標(biāo)移過來</button>

execcodegetcode

代碼解釋

1、更改按鈕文字顏色，可通過設(shè)置CSS的 color 屬性。

2、要改變動(dòng)畫移動(dòng)的速度，可通過設(shè)置CSS的 transition 屬性。

3、HTML代碼，本實(shí)例使用的是 button 元素標(biāo)簽，但不一定要使用這個(gè)，你也可以使用input標(biāo)簽，或span標(biāo)簽等等，只要求標(biāo)簽的類名稱要寫對(duì) class="btn-grad" 。比如下面的HTML代碼：

<input type="button" class="btn-grad" value="鼠標(biāo)移過來">

或

<span class="btn-grad" >鼠標(biāo)移過來</span>

您可能對(duì)以下文章也感興趣

• CSS3顏色漸變按鈕 鼠標(biāo)劃過變色
• 【8個(gè)實(shí)例】純CSS按鈕(button)，簡單漂亮實(shí)用
• 很好看的css3動(dòng)畫按鈕鼠標(biāo)懸停效果【2個(gè)實(shí)例】
• 漂亮懸停效果的CSS3動(dòng)畫按鈕【5個(gè)實(shí)例代碼】
• 漂亮的偽元素CSS按鈕5個(gè)實(shí)例代碼
• 20個(gè)純CSS3實(shí)現(xiàn)的彩色透明水晶按鈕

標(biāo)簽: button  動(dòng)畫按鈕  漸變按鈕  按鈕  扁平按鈕