按鈕動畫懸停以改變顏色從上到下

-1

我想要的是在懸停時從上到下更改按鈕的背景顏色。在這個頁面上有一個很好的例子http://tympanus.net/Development/CreativeButtons/ 這是我現在的代碼。由於按鈕動畫懸停以改變顏色從上到下

CSS

#button { 

    outline: 0; 
    margin: 20px 10px 10px 6px; 
    border-width:2.7px; 
    font-size: 25px; 
    border-style: solid; 
    font-family: 'PT Sans Narrow', sans-serif; 
    padding: 4px 40px; 
    background-color: white; 
    border-color: #0e83cd; 
    color: #0e83cd; 
    transition: all .3s ease-in; 


    } 

#button:hover { 
    color: white; 
    background-color: #0e83cd; 
    transition: all .3s ease-in; 
    }

HTML

<button id="button" />Ask</button>

來源

2015-12-27 Max R

哪裏是你的HTML標記？還請創建一個到目前爲止所做的演示，以便我們看看它。 – Guille

有很多方法可以做到這一點。這個CSS可以幫助你。

#button { 

    /*Reset*/ 
    display: inline-block; 
    outline: none; 
    background-color: transparent; 

    /*Some fancy stuff*/ 
    padding: 0 20px; 
    line-height: 200%; 
    border: 1px solid silver; 

    /*Magic*/ 
    background-image: linear-gradient(PaleVioletRed, PaleVioletRed 50%, Sienna 50%, Sienna); 
    background-size: 100% 200%; 
    -webkit-transition: background-position .3s; 
    transition: background-position .3s; 
} 
#button:hover { 
    background-position: 0 -100%; 
}

演示：http://codepen.io/theonebeing/pen/wMzYdY

來源

2015-12-27 03:13:18

我將如何能夠改變背景的顏色，謝謝 –

第一個顏色是PaleVioletRed，第二個是Sienna。你可以改變它們。 –

這是爲了做這件事，因爲它的網站做的：

CSS：

button { 
    text-rendering: auto; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: start; 
    margin: 0em 0em 0em 0em; 
    font: 13.3333px Arial; 
} 
user agent stylesheetinput, 
textarea, 
keygen, 
select, 
button, 
meter, 
progress { 
    -webkit-writing-mode: horizontal-tb; 
} 
user agent stylesheetbutton { 
    -webkit-appearance: button; 
} 
.btTxt submit { 
    border: 3px solid #fff; 
    color: #fff; 
} 
.btTxt submit { 
    border: none; 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    background: none; 
    cursor: pointer; 
    padding: 25px 80px; 
    display: inline-block; 
    margin: 15px 30px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    outline: none; 
    position: relative; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
} 
*, 
*:after, 
*:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

希望這有幫助！有一個快樂的聖誕節:-)

來源

2015-12-27 02:37:43

我如何將這個應用到我的代碼？對不起 –

改了它，應該現在工作！ –

按鈕動畫懸停以改變顏色從上到下

回答

相關問題