El botón es una característica importante de cualquier sitio web o en cualquier aplicación. Hay algunas cosas en particular que todos deberíamos preocuparnos por los botones, como el color, el tamaño, etc. En Spectre, tenemos algunas clases específicas para cosas individuales en los botones. Todas las clases se mencionan y describen a continuación:
Botón de espectro:
- Tamaño del botón Spectre: la clase de tamaño del botón Spectre se utiliza para definir el tamaño del botón.
- Colores del botón Spectre: la clase de color del botón Spectre se utiliza para definir el color del botón.
- Estados del botón Spectre: la clase de estado del botón Spectre se utiliza para definir los estados del botón.
- Grupo de botones de Spectre: la clase de grupo de botones de Spectre se utiliza para establecer la categoría del botón.
Sintaxis:
<button class="btn"> Button </button>
Los siguientes ejemplos ilustran el concepto del botón Spectre:
Ejemplo 1: en este ejemplo, crearemos diferentes tipos de botones, como botones normales, botones vinculados, etc.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Button Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Button Class</strong> <br> <button class="btn btn-link">Linked Button</button> <button class="btn btn-primary">Primary Button</button> <button class="btn">Default Button</button> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo usaremos otras clases para diseñar y decorar los botones como queramos.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Button Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Button Class</strong> <br> <button class="btn btn-primary btn-sm">Linked Button</button> <button class="btn btn-primary">Primary Button</button> <button class="btn btn-primary s-circle btn-lg">756</button> </center> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/elements/buttons.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA