Efecto botón biselado con CSS.

24/03/2024

Utilizando las sombras CSS lograremos el efecto de biselado en los botones.

En el texto de los ejemplos viene indicado como llamar a la clase.

Esquinas

• El primer boton que no llama a la clase corner ni round tiene las esquinas cuadradas.
• La clase corner ofrece un border-radius:5px;
• La clase round ofrece un border-radius:100px;

Colores

• Por defecto white
• La clase gray en el ejemplo del boton white
• La clase blue en el ejemplo del boton yellow

Fondos

• Disponibles todos los que se ven en los ejemplos
• La llamada que hacemos en el ejemplo del botón white sería:
  <div class="button-biselado corner gray background-white">Púlsame - button-biselado corner gray background-white</div>

Ejemplos de botones aplicando biselado y diferentes colores. Clase biselado.css.

Y por último un botón redondo

Vea también

Efecto biselado con CSS