按鈕顏色CSS轉換/漸變

我正在爲我的應用程序創建一個樣式化的按鈕。希望是使用CSS來產生一個按鈕，類似如下：。按鈕顏色CSS轉換/漸變

藍色來自於背景，因此它是不相關的，綠色的色調我很感興趣，我不首先確定它是否可以用CSS來做，或者如果可能的話怎麼做。

你可以在左上角開始漸變，從那裏移動到不同的顏色，並使用漸變底部的最終顏色結束？

如果有，您是否知道我可以參考的任何示例？

2015-10-26 Earpwald

請注意，目前的設計趨勢是平坦和最小的。也許有一點陰影:) – misterManSam

您可以使用顏色停止功能輕鬆完成CSS漸變。這裏有一個片斷例如：

.gradientButton { 
 
    height: 50px; 
 
    width: 100px; 
 
    line-height:50px; 
 
    vertical-align:middle; 
 
    text-align:center; 
 
    font-family:arial; 
 
    font-size:26px; 
 
    font-weight:bold; 
 
    color:white; 
 
    text-shadow:2px 2px #336633; 
 
    box-shadow:2px 2px #336633; 
 
    border: 1px solid black; 
 
    border-radius:12px; 
 
    background: linear-gradient(to bottom right, LawnGreen 15%, green 85%, DarkGreen 90%); 
 
} 
 

 
.gradientButton:hover { 
 
    text-shadow:1px 1px #336633; 
 
    box-shadow:1px 1px #336633; 
 
    background: linear-gradient(to bottom right, LawnGreen 5%, green 80%, DarkGreen 85%); 
 
}

<html> 
 
    <body> 
 
    <div class="gradientButton">log in</div> 
 
    </body> 
 
</html>

使用像漸變和陰影，你甚至可以提供懸停效果，如我在這裏所做使它看起來像按鈕的，當你在它懸停鬱悶。

來源

2015-10-26 00:38:44

這很棒....現在我踢我自己不知道它！我現在知道了，謝謝！ – Earpwald

按鈕顏色CSS轉換/漸變

回答

相關問題