我該如何製作像這樣的css漸變和鼠標懸停邊框

Question

我需要幫助複製這些三個按鈕，我最關心的是如何讓漸變看起來完全像它們。我也很好奇如何把一個白色的邊框放在鼠標上或按鈕點擊

我試過這個代碼的漸變，但我得到的是一個厚厚的白線雖然中間。任何幫助將不勝感激

#blue{ 
 
    background: linear-gradient(#00a1d6, white , #00a1d6); 
 
} 
 
#yellow{ 
 
    background: linear-gradient(#df8700, white , #df8700); 
 
} 
 
#red{ 
 
    background: linear-gradient(#950f16, white , #950f16); 
 
}

Answer 1

根據您的DOM是如何構建的，你可能希望避免使用邊框作爲有時邊框厚度將在屏幕上游移元素。嘗試使用box-shadow。

#blue:hover, 
 
#yellow:hover, 
 
#red:hover, 
 
#blue:active, 
 
#yellow:active, 
 
#red:active { 
 
    box-shadow: inset 0 0 1px 2px white; 
 
}

或者給每個按鈕一個類來簡化CSS

.button-class:hover, 
 
.button-class:active { 
 
    box-shadow: inset 0 0 1px 2px white; 
 
}

Answer 2

#color { 
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, yellow); /* Standard syntax */ 
} 

您可能希望這樣的事情。

Answer 3

$(".square"/*button class or id*/).hover(function(){ 
    $(this).css("border","2px solid #fff;") 
},function(){ 
    $(this).css("border","none") 
}); 

Answer 4

明白了，玩了它後，我想出瞭解決方案。

#color{ 
    background: ... (#00a1d6 0%, #55b7d6 45% , #00a1d6 0%); 
     }