0
251
Views¿Cómo puedo hacer un degradado css como este y pasar el mouse por encima del borde?
Necesito ayuda para replicar tres botones como estos, lo que más me preocupa es cómo hacer que el degradado se vea exactamente como es. También tengo curiosidad sobre cómo poner un borde blanco al pasar el mouse o hacer clic en el botón
Probé este código para el degradado, pero todo lo que obtengo es una línea blanca gruesa en el medio. Cualquier ayuda será apreciada
#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
Dependiendo de cómo se construya su DOM, es posible que desee evitar el uso de bordes, ya que a veces el grosor del borde cambiará los elementos en la pantalla. Intenta usar box-shadow.
#blue:hover, #yellow:hover, #red:hover, #blue:active, #yellow:active, #red:active { box-shadow: inset 0 0 1px 2px white; }O dale a cada botón una clase para simplificar el 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 */ }Probablemente quieras algo como esto.
·
Santiago Trujillo
Report
Answer question