Clever Geek Handbook

How can I make css gradient like this and mouse overlay

I need help copying three buttons like these, my biggest concern is how to make the gradient look the way they look. I am also curious how to set the white border of the mouse or click on a button

I tried this code for a gradient, but all I get is a thick white line, albeit an average one. Any help would be appreciated

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


Gradient of three squares

+3


source to share


4 answers


Depending on how your DOM is built, you may want to avoid using borders, as sometimes the thickness of the border pushes elements around the screen. Try using a window shadow.

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




Or give each button a class to simplify css

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


+1


source 


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


+2


source 


#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 */
}

You probably want something like this.

0


source


Got this, after playing with it I came up with a solution.

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


source






More articles:


All Articles