卡卡網(wǎng)

今天給大家分享一些漂亮的CSS漸變按鈕，鼠標滑過(hover)后有動畫效果，這些按鈕UI設計，在很多網(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" >鼠標移過來</button>

execcodegetcode

代碼解釋

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

2、要改變動畫移動的速度，可通過設置CSS的 transition 屬性。

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

<input type="button" class="btn-grad" value="鼠標移過來">

或

<span class="btn-grad" >鼠標移過來</span>

您可能對以下文章也感興趣

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

標簽: button  動畫按鈕  漸變按鈕  按鈕  扁平按鈕