Con estos modernos botones estilo CSS darás una mejor impresión a tu página Web. En seguida les mostrare el código y una explicación de ello para que puedan modificaros a su gusto y disposición.
Y aquí el código...
<!DOCTYPE html><html><head>
<style type="text/css">
.button{
border:0px solid #df0909;-inset;
-webkit-border-radius;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;border-radius: 9px;width:133px;
font-size:17px;font-family:arial, helvetica, sans-serif;
padding: 7px 7px 7px 7px; font-weight:bold;
text-align: center; color: #FFFFFF;
background-color: #f62b2b;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f62b2b), color-stop(100%, #d20202));
background-image: -webkit-linear-gradient(top, #f62b2b, #d20202);
background-image: -moz-linear-gradient(top, #f62b2b, #d20202);
background-image: -ms-linear-gradient(top, #f62b2b, #d20202);
background-image: -o-linear-gradient(top, #f62b2b, #d20202);
background-image: linear-gradient(top, #f62b2b, #d20202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f62b2b, endColorstr=#d20202);
}
.button:hover{
border:0px solid #b30808; background-color: #e40a0a;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e40a0a), color-stop(100%, #9f0202));
background-image: -webkit-linear-gradient(top, #e40a0a, #9f0202);
background-image: -moz-linear-gradient(top, #e40a0a, #9f0202);
background-image: -ms-linear-gradient(top, #e40a0a, #9f0202);
background-image: -o-linear-gradient(top, #e40a0a, #9f0202);
background-image: linear-gradient(top, #e40a0a, #9f0202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e40a0a, endColorstr=#9f0202);
}
</style></head>
<body>
<p>
<p>
<center><h2>Botones CSS<h2></center>
<center><form> <input type="button" class="button" value="Ejemplo 1" />
<input type="button" class="button" value="Ejemplo 2" />
<input type="button" class="button" value="Ejemplo 3" />
<input type="button" class="button" value="Ejemplo 4" /> </center></form>
</body>
</html>
________________________________________________________________________________
Y ahora vamos a descomponer el código para entenderlo mejor :
<!DOCTYPE html><html><head>
<style type="text/css">
Aquí le decimos a nuestro bloc de notas que aremos un documento HTML con código CSS y así el explorador podrá identificar lo que queremos mostrar.
________________________________________________________________________________
.button{
Creación de la variable "button", puedes llamarla de cualquier manera como boton o como quieras.
________________________________________________________________________________
solid #df0909;-webkit-box-shadow: #B4B5B5 12px 12px 12px
;-moz-box-shadow: #B4B5B5 12px 12px 12px ;
box-shadow: #B4B5B5 12px 12px 12px ; -
;-moz-box-shadow: #B4B5B5 12px 12px 12px ;
box-shadow: #B4B5B5 12px 12px 12px ; -
Si quieres ponerle algo de sombra exterior a los botones, introduce este código después de la declaración de la variable "button" , después de donde dice "border:0px" de modifica los px, si quieres que la sombra sea pareja, cambia todos los px a la misma medida y veras algo como esto...
Para cambiar el color de sombra busca esta parte del código "#B4B5B5". (luego subiré colores rgb)
________________________________________________________________________________
Si prefieren una sombra interna que es la que más me gusta, modifican el código. Lo colocan enseguida de "border:0px solid #df0909;-"...
;-webkit-box-shadow: #B4B5B5 16px 16px 16px inset;
-moz-box-shadow: #B4B5B5 16px 16px 16px inset;
box-shadow: #B4B5B5 16px 16px 16px inset;
-webkit-border-radius;-
Y se vera de esta manera :
________________________________________________________________________________
Para cambiar el tipo y el tamaño de letra es lo siguiente:
font-size:17px;font-family:arial;
Centrar el texto y color:
text-align: center; color: #FFFFFF;
________________________________________________________________________________
Cambiar el ancho de los botones:
padding: 7px 7px 7px 7px;
________________________________________________________________________________
Colores de los botones, puedes poner dos y se vera como degradado:
background-color: #000000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #6919D2));
background-image: -webkit-linear-gradient(top, #000000, #6919D2);
background-image: -moz-linear-gradient(top, #000000, #6919D2);
background-image: -ms-linear-gradient(top, #000000, #6919D2);
background-image: -o-linear-gradient(top, #000000, #6919D2);
background-image: linear-gradient(top, #000000, #6919D2);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#6919D2);
}
Si copiaste este código, debe de quedarte así :
________________________________________________________________________________
Este es para cambiar al segundo color, que es cuando pasas el puntero por el botón:
.button_example:hover{
border:1px solid #333333; background-color: #6A92CF;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6A92CF), color-stop(100%, #9D0000));
background-image: -webkit-linear-gradient(top, #6A92CF, #9D0000);
background-image: -moz-linear-gradient(top, #6A92CF, #9D0000);
background-image: -ms-linear-gradient(top, #6A92CF, #9D0000);
background-image: -o-linear-gradient(top, #6A92CF, #9D0000);
background-image: linear-gradient(top, #6A92CF, #9D0000);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#6A92CF, endColorstr=#9D0000);
}
Y se vera así:
Esto a sido todo amigos, espero y les sirva, si tiene algún problema con los códigos, solo comenten ;)
Las imágenes y el texto son mi auditoria, fueron tomadas directamente en mi ordenador.
No hay comentarios:
Publicar un comentario