Botones de html y css ejemplos [CODIGO]

Botones de html y css ejemplos

Mediante CSS vamos a aplicarle una serie de características al botón como fondo de color, un color al texto y relleno para darle tamaño y otros.

Vamos a ver algunos ejemplos para que puedas copiar, pegar o modificar el código y crear tus botones.

Utilizaremos estos códigos para modificar el estilo CSS:

text-decoration: para quitarle el estilo de enlace, como el subrayado.
font-weight: para darle cuerpo (tipo negrita) al texto del botón.
font-size: el tamaño del texto en pixeles.
color: color del texto en código hexadecimal.
padding-top: el relleno superior del botón.
padding-bottom: el relleno inferior del botón.
padding-left: el relleno izquierdo del botón.
padding-right: el relleno derecho del botón.
background-color: color de fondo del botón.
border-width: Anchura del borde en píxeles.
border-color: color del borde en código hexadecimal.
border-radius: redondeo del botón.
border-style: el estilo del borde, línea, con puntos…

Botón Rectangular:
Un sencillo botón con forma rectangular. Fijare en el padding-left y padding-right que se han aumentado para hacer el relleno en forma de rectángulo.

crear-boton-azul-con-css
.boton-personalizado {<br /> text-decoration:none;<br /> font-weight:600;<br /> font-size:20px;<br /> color:#ffffff;<br /> padding-top:20px;<br /> padding-bottom:20px;<br /> padding-left:40px;<br /> padding-right:40px;<br /> background-color:#005BBB;<br /> }<br />

Botón Rectangular Largo:
En este estilo el botón es más largo para aumentar su visibilidad, únicamente se ha aumentado el padding-left y padding-right.

crear-un-boton-con-css
.boton-personalizado-2 {<br /> text-decoration:none;<br /> font-weight:600;<br /> font-size:20px;<br /> color:#ffffff;<br /> padding-top:15px;<br /> padding-bottom:15px;<br /> padding-left:150px;<br /> padding-right:150px;<br /> background-color:#FFD27D;<br /> }<br />

Botón con borde: 
A este botón se le a aplicado un sencillo borde de color usando border-color, puedes definir el tamaño del borde con border-width y el border-style sirve para que el borde sea una línea, (si pones dotted el botón será con puntitos)

.boton-personalizado-3 {<br /> text-decoration:none;<br /> font-weight: 600;<br /> font-size: 20px;<br /> color:#ffffff;<br /> padding-top:15px;<br /> padding-bottom:15px;<br /> padding-left:40px;<br /> padding-right:40px;<br /> background-color:#f2595e;<br /> border-color: #F69DA1;<br /> border-width: 3px;<br /> border-style: solid;<br /> }<br />

Botón con borde redondeado:
Puedes redondear las esquinas de un botón con border-radius y cambiar ligeramente su aspecto. Con 3px se suavizan las esquinas y para crear los bordes redondeados en un botón rectangular el tamaño que hay que poner con border-radius depende del tamaño del botón. Juguetea con el botón hasta que lo rompas, sin miedo!

.boton-personalizado-4 {<br /> text-decoration:none;<br /> font-weight: 600;<br /> font-size: 20px;<br /> color:#333333;<br /> padding-top:15px;<br /> padding-bottom:15px;<br /> padding-left:40px;<br /> padding-right:40px;<br /> background-color:#FFD27D;<br /> border-color: #d8d8d8;<br /> border-width: 3px;<br /> border-style: solid;<br /> border-radius:35px;<br /> }<br />

Botón fantasma:
Un botón fantasma tiene el fondo transparente para que se vea lo que hay debajo, quedan geniales con el borde y el texto en blanco sobre fotografías oscuras o con color en fotografías iluminadas. Para que el fondo sea transparente se usa background-color: transparent; es muy fácil!

boton-fantasma-css<br /> boton-transparente-css<br /> .boton-personalizado-5 {<br /> text-decoration:none;<br /> font-weight: 600;<br /> font-size: 20px;<br /> color:#000000;<br /> padding-top:15px;<br /> padding-bottom:15px;<br /> padding-left:40px;<br /> padding-right:40px;<br /> background-color: transparent;<br /> border-width: 3px;<br /> border-style: solid;<br /> border-color: #000000;<br /> }