El grupo de botones de interfaz de usuario semántica también ofrece una variación de grupo de botones, hay botones de icono, botones de icono etiquetados, botones de grupo mixto, ancho igual, botones de colores, botones básicos, botones de tamaño de grupo, etc.
En este artículo, discutiremos los botones básicos. Los botones básicos pueden tener menos pronunciación, aquí podemos crear un grupo de botones simple que seguirá a un botón de tipo básico fijo, cada botón será el mismo dentro de ese grupo.
Variaciones de botones de interfaz de usuario semántica Clase de botones básicos:
- basic: esta clase se utiliza para crear un grupo básico de botones.
Sintaxis:
<div class="ui basic buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
Ejemplo: En este ejemplo, usaremos el botón base. Además, diseñaremos tres tipos de botones básicos, normales, verticales y de colores. Puedes mezclar las otras clases también para jugar con los botones.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1>Geeksforgeeks:</h1> <strong>Semantic UI Button Variations Basic Buttons</strong> </center> <br><br> <strong>Basic Buttons:</strong> <br> <div class="ui basic buttons"> <button class="ui button">Like</button> <button class="ui button">Share</button> <button class="ui button">Subscribe</button> </div> <br> <strong>Vertical basic buttons:</strong> <br> <div class="ui vertical basic buttons"> <button class="ui button">Like</button> <button class="ui button">Share</button> <button class="ui button">Subscribe</button> </div> <br> <strong>Coloured basic buttons:</strong> <br> <div class="ui green basic buttons"> <button class="ui button">Like</button> <button class="ui button">Share</button> <button class="ui button">Subscribe</button> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos el botón base con un ícono adjunto. Además, diseñaremos tres tipos de botones básicos, normales, verticales y de colores. Puedes mezclar las otras clases también para jugar con los botones.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong>Semantic UI Button Variations Basic Buttons</strong> </center> <br><br> <strong>Basic icon Buttons:</strong> <div class="ui basic icon buttons"> <button class="ui button">Like <i class="like icon"></i> </button> <button class="ui button">Share <i class="share icon"></i> </button> <button class="ui button">Subscribe <i class="user icon"></i> </button> </div> <br><br> <strong>Vertical Basic icon Buttons:</strong> <div class="ui vertical basic icon buttons"> <button class="ui button">Like <i class="like icon"></i> </button> <button class="ui button">Share <i class="share icon"></i> </button> <button class="ui button">Subscribe <i class="user icon"></i> </button> </div> <br><br> <strong>Coloured Basic icon Buttons:</strong> <div class="ui basic red icon buttons"> <button class="ui button">Like <i class="like icon"></i> </button> <button class="ui button">Share <i class="share icon"></i> </button> <button class="ui button">Subscribe <i class="user icon"></i> </button> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/button.html#basic-buttons
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA