El botón de interfaz de usuario semántica ofrece varios tipos de componentes de microbotones como tipos, grupos, contenido, estados, variaciones y variaciones de grupo.
Las variaciones de Button tienen diferentes tipos de botones, como Social, Diferente tamaño, Flotante, Coloreado, Compacto, Alternar, Positivo, Negativo, Fluido, Circular, Botones adjuntos vertical y horizontalmente. En este artículo, aprenderemos sobre el botón de color de variaciones de botón de interfaz de usuario semántica, donde podemos establecer el color que queramos.
Variaciones de botones de interfaz de usuario semántica Clase de botones de colores:
- color-name: Esta no es una clase, se representa como una variable que puede ser cualquier nombre del color. El nombre del color puede ser azul, verde, rojo, etc.
Sintaxis:
<button class="ui color-name button"> ... </button>
El siguiente ejemplo ilustra los botones de colores de las variaciones de los botones de la interfaz de usuario semántica:
Ejemplo:
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 Colored Buttons</strong> <br><br> <strong>Colored Icon Button:</strong> <button class="ui red button">Red</button> <button class="ui orange button">Orange</button> <button class="ui yellow button">Yellow</button> <button class="ui olive button">Olive</button> <button class="ui green button">Green</button> <button class="ui teal button">Teal</button> <br><br> <strong>Colored Button:</strong> <button class="ui blue button"> <i class="icon fire"></i> </button> <button class="ui violet button"> <i class="icon bolt"></i> </button> <button class="ui purple button"> <i class="icon setting"></i> </button> <button class="ui pink button"> <i class="icon user"></i> </button> <button class="ui brown button"> <i class="icon facebook"></i> </button> <button class="ui grey button"> <i class="icon instagram"></i> </button> <button class="ui black button"> <i class="icon laptop"></i> </button> </center> </body> </html>
Producción:
Botones de colores de variaciones de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#colored
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA