0
240
ViewsHow can I make a css gradient like this and mouseover border
I need help replicating three buttons like these, I am most concerned about how to make the gradient look exactly like how they are. I am also curious as to how put a white border on mouse over or button click
I tried this code for the gradient but all I get is a thick white line though the middle. Any help will be appreciated
#blue{
background: linear-gradient(#00a1d6, white , #00a1d6);
}
#yellow{
background: linear-gradient(#df8700, white , #df8700);
}
#red{
background: linear-gradient(#950f16, white , #950f16);
}
·
Santiago Trujillo
3 answers
Answer question0
$(".square"/*button class or id*/).hover(function(){
$(this).css("border","2px solid #fff;")
},function(){
$(this).css("border","none")
});
·
Santiago Trujillo
Report
0
Depending on how your DOM is constructed you may want to avoid using borders as sometimes the border thickness will shift elements around on the screen. Try using box-shadow.
#blue:hover,
#yellow:hover,
#red:hover,
#blue:active,
#yellow:active,
#red:active {
box-shadow: inset 0 0 1px 2px white;
}Or give each button a class to simplify the css
.button-class:hover,
.button-class:active {
box-shadow: inset 0 0 1px 2px white;
}
·
Santiago Trujillo
Report
0
#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.
·
Santiago Trujillo
Report
Answer question