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:

Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 320
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 338
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Resumen de como comentar código en html, css y javascript
- 450
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Pseudo Clases :link, :active, :hover y :visited
- 69
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 102
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Unidades de medida absolutas y relativas en CSS
- 232
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Ejemplo de centrado horizontal de una caja con CSS
- 334
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Dimensiones reales de una caja en CSS
- 165
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 181
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Colores CSS para web
- 431
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
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.