Guía rápida para crear botones personalizados con CSS

Guía rápida para crear botones personalizados con CSS

Print Friendly, PDF & Email
Guía rápida para crear botones personalizados con CSS
Valora esta entrada

En esta guía veremos algunos consejos CSS que nos pueden ayudar a estilizar botones.

Es necesario conocer las pseudoclases :hover, :active y algunas propiedades básicas como border-radius, cursor y box-shadow.

También es de menester saber aplicar gradientes para el fondo.

En mi opinión los más importante de todo es conseguir que un usuario nunca tenga duda de que está ante un botón.

Es preferible no alardear de efectos pero incitar al visitante web a entender que se espera de él que haga clic.

Dar forma al botón: la propiedad border-radius

CSS | Ejemplos de uso de la propiedad border-radius
CSS. Ejemplos de uso de la propiedad border-radius

La propiedad border-radius sirve para redondear las esquinas de una caja html.

Por ejemplo:

.boton-4{border-radius:0 50% 0 50%;}
.boton-5{border-radius:50%;}
.boton-6{border-radius:50% 50% 0 0;}

La expresión se puede escribir minimizada o no siguiendo la regla del reloj.

  • La primera cifra indica la esquina superior izquierda.
  • La segunda cifra indica la esquina superior derecha.
  • La tercera cifra indica la esquina inferior derecha.
  • La cuarta cifra indica la esquina inferior izquierda.

Recordar que nadie obliga a indicar las unidades en píxeles. Por ejemplo también pueden ir en porcentajes, siendo para el caso de border-radius el mayor porcentaje que tiene sentido el 50%.

Propiedades a combinar con el pseudo-selector :hover

Personalizar el ratón: la propiedad cursor

La propiedad cursor sirve para modificar el ratón.
Los ejemplos que más me gustan son:

cursor: pointer | zoom-in | zoom-out | crosshair | progress | not-allowed | none;

Sin embargo, si queréis ver la lista entera podéis hacerlo en este enlace.

Para mi los más útiles son:

.boton-1:hover{cursor:pointer;}/*Para botones*/
.boton-2:hover{cursor:not-allowed;} /*Para formularios no activos*/

Personalizar el contorno: la propiedad box-shadow

CSS aplicación box-shadow
Botones con distintos box-shadow.

La propiedad box-shadow sirve para dar contorno al botón.

El contorno puede ser sólido o una sombra.

box-shadow: desplazamientoHorizontal desplazamientoVertical difuminado extendido color;
 Ejemplo: .caja-1{10px 5px 5px 5px red;}

De los ejemplos en la imagen fijaros especialmente en el cuarto botón que no tiene sombra. Al no haberse desplazado y no haberle asignado la propiedad extendido este es el efecto: es como si no hubiera pasado prácticamente nada. Tan sólo un pequeño difuminado alrededor del botón.

También observar el último de todos. No hay desplazamiento pero si haber difuminado + extendido se aprecia como una especie de borde que contornea todo el botón.

Como curiosidad podemos aplicar distintas sombras una al lado de otra. Probar por ejemplo:

.caja-1{10px 5px 5px 5px red, 10px 5px 5px 5px green; 10px 5px 5px 5px blue;}

Fondos

Podemos asignar un fondo mediante la propiedad background-color o bien mediante background-image.

En el primer caso puede ser un color uniforme o un gradiente de color, pudiendo ser lineal o radial.

En el segundo caso hay que tener la precaución de posicionar la imagen e indicar si se debe repetir verticalmente y/o horizontalmente o no.

(Esta sección queda pendiente de desarrollar.)

¿Es imprescindible la etiqueta <a> o <button>?

Esta parte es para aquellos que les guste la programación. Os invito a leer el tutorial javascript de este mismo blog.

Mediante javascript podemos sustituir perfectamente un enlace o una etiqueta <button> sin problema.

El código sería algo parecido a

nodo.addEventListener("click",function(){window.alert("saludo"});

Por tanto podemos hacer un botón con un <div>, <span>, <label> o lo que necesitamos en cada momento.

Ejemplo de creación de un botón

*{box-sizing:border-box;}
a[class *="boton-"]{
    color:#fff;
    text-decoration:none;
    padding:20px 40px;
    border:1px solid #000;
    display:block;
    width:200px;
    text-align:center;
    margin:50px;
    background-color:#bb00bb;
}

.boton-1{
    border-radius:50%;
    box-shadow:3px 2px 5px 1px #ccc;}
.boton-1:hover{
    cursor:pointer;
    font-style:italic;
    box-shadow:3px 2px 10px 1px #b0b0b0;
    color:#000;
}
.boton-1:active{
    box-shadow:3px 2px 15px 1px#000;
    font-weight:bold;
    color:#000;
}

¡Hola!

Querido lector,

Deseo que estos tips te puedan ser de utilidad. Ahora es cuestión de practicar y sobre todo lo más difícil… ¡tener buen gusto!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Como centrar un texto mediante CSS y no con HTML
- 879
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Ejemplo de centrado horizontal de una caja con CSS
- 593
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 465
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
LibrosWeb ahora es UniWebSidad
- 307
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Elementos en línea. Elementos bloque. Elementos inline-block.
- 599
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
¿Qué posicionamiento css se ha usado?
- 47
Ejercicio visual dónde se debe indicar que tipo de posicionamiento se ha usado para desplazar una caja. Incluye solución y explicación.
Box Sizing, como modificar el modelo de cajas convencional
- 321
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 309
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Introducción al CSS. Que significa Cascading Style Sheets.
- 254
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Ejercicio diferencia entre centrado de texto y de cajas en css
- 49
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.