卡卡網(wǎng)

今天給大家介紹如何用CSS3實現(xiàn)顏色漸變的按鈕，并且在鼠標(biāo)劃過時變色，這按鈕在UI設(shè)計中非常常用。

CSS3顏色漸變按鈕 鼠標(biāo)劃過變色

demodownload

CSS代碼

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{background-color: #1F1F1F;overflow: hidden}
.buttons {
    margin: 10%;
    text-align: center;
}

.btn-hover {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

HTML代碼

<div class="buttons">
    <button class="btn-hover color-1">BUTTON</button>
</div>

execcodegetcode

代碼解釋：

1、CSS代碼中的 linear-gradient() 函數(shù)

linear-gradient() 用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。

創(chuàng)建一個線性漸變，需要指定兩種顏色，還可以實現(xiàn)不同方向（指定為一個角度）的漸變效果，如果不指定方向，默認(rèn)從上到下漸變。

/* 從上到下，藍(lán)色漸變到紅色 */
linear-gradient(blue, red);
 
/* 漸變軸為45度，從藍(lán)色漸變到紅色 */
linear-gradient(45deg, blue, red);
 
/* 從右下到左上、從藍(lán)色漸變到紅色 */
linear-gradient(to left top, blue, red);
 
/* 從下到上，從藍(lán)色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束 */
linear-gradient(0deg, blue, green 40%, red);

2、CSS代碼中的 box-shadow 屬性

box-shadow是把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

標(biāo)簽: css3  button  漸變按鈕