El botón es una característica importante de cualquier sitio web o en cualquier aplicación. La clase de tamaño Spectre Button se utiliza para definir el tamaño del botón.
Clase de tamaño de botón:
- btn-lg: esta clase se usa para establecer el tamaño del botón en grande.
- btn-sm: esta clase se usa para establecer el tamaño del botón en pequeño.
Nota: Podrías usar la clase «btn-action» para un botón cuadrado, o agregar otra clase s-circle para un botón redondo, que a menudo se usa como botón de acción flotante (FAB).
- btn-action: esta clase se usa para establecer la forma del botón en un cuadrado.
- s-circle: esta clase se usa para establecer la forma del botón en un círculo.
El siguiente ejemplo ilustra el tamaño del botón en Spectre.
Ejemplo 1: En este ejemplo, definiremos el tamaño del botón.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Buttons 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>GeeksforGeeks</h1> <strong>SPECTRE Button Size Class</strong> <br> <button class="btn btn-primary btn-lg">Large Button</button> <button class="btn btn-success">Default Button</button> <button class="btn btn-error btn-sm">Small Button</button> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, definiremos la forma del botón.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Buttons 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>GeeksforGeeks</h1> <strong>SPECTRE Button Size Class</strong> <br> <button class="btn btn-primary btn-action"> <i class="icon icon-arrow-left"></i> </button> <button class="btn btn-success"> Default Button </button> <button class="btn btn-error btn-action"> <i class="icon icon-arrow-right"></i> </button> <br><br> <button class="btn btn-primary s-circle"> <i class="icon icon-arrow-left"></i> </button> <button class="btn btn-success"> Default Button </button> <button class="btn btn-error s-circle"> <i class="icon icon-arrow-right"></i> </button> </center> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/elements/buttons.html#buttons-sizes
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA