このようなCSSグラデーションやマウスオーバーの境界線を作るにはどうすればいいですか？

Question

私はこれらのような3つのボタンを複製するのに助けが必要です。私はまた、マウスの上に白い枠線を置くか、ボタンをクリックすると好奇心が強いです

私はグラデーションのためにこのコードを試しましたが、私はすべてが白い太い線です。すべてのヘルプは、おそらくこのような何かをしたい

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

Answer 1

DOMの構成によっては、境界線の太さによって画面上の要素が移動することがあるため、境界線を使用しないようにすることができます。ボックスシャドウを使用してみてください。

#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%); 
     }