Hoy les traigo unos botones con estilo, programados en HTML y CSS. Son unos botones elegantes y profesionales, que podéis usar sin problema en vuestras páginas web. Les recuerdo que, como todas mis plantillas y códigos, son gratuitos.
Para insertar uno o varios de estos botones en tu página web, deberás copiar y pegar los siguientes códigos en tu página (el código para el HEAD solo es necesario que lo pongas una vez). Si no sabes donde poner los códigos, haz clic aquí.
CÓDIGO HTML
<center>
<h3 style="color:white;">
<a href="http://j-designs.jimdo.com/" class="bo" style="color:white; text-decoration:none;">ENTRAR</a>
</h3>
</center>
Modifica el texto en naranja para cambiar el color de letra, el azul para poner el enlace donde se entrará al hacer clic y el verde para cambiar el texto del botón.
CÓDIGO PARA EL HEAD
<style type="text/css">
/*<![CDATA[*/
.bo{
background-color: #E7A72D;
font-family: Open Sans;
color: white;
letter-spacing: 12px;
-webkit-border-radius: 10px 20px;
-moz-border-radius: 10px 20px;
text-align: center;
text-color: white;
align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
margin-top: 10em;
margin-bottom: 10em;
}
.bo:hover{
background-color: #B8860B;
font-family: Open Sans;
color: white;
letter-spacing: 12px;
-webkit-border-radius: 10px 20px;
-moz-border-radius: 10px 20px;
text-align: center;
text-color: white;
align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
margin-top: 10em;
margin-bottom: 10em;
}
.bo a{color:#FFFFFF}
/*]]>*/
</style>
Modifica el texto verde para cambiar el color del botón y el rojo para modificar el color del botón cuando se pone el ratón encima del mismo.
Escribir comentario
roger blanders (martes, 20 abril 2021 23:52)
muy buena tu pagina
roger blanders (martes, 20 abril 2021 23:53)
me gustaria que me enceñes a como subir mi pagina porque tengo varias paginas reseltas pero no allo la manera de subirla