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 la variación circular de los botones.
Clase circular de variaciones de botones de interfaz de usuario semántica:
- circular: esta clase se usa para hacer circular cualquier botón:
Sintaxis:
<button class="ui circular ... button "> <i class="icon ..."></i> </button>
El siguiente ejemplo ilustra la circular de variaciones de botones:
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 Circular</strong> <br><br> <div> <strong>Social Circular Buttons:</strong> <button class="ui circular facebook icon button"> <i class="facebook icon"></i> </button> <button class="ui circular linkedin icon button"> <i class="linkedin icon"></i> </button> <button class="ui circular youtube icon button"> <i class="youtube icon"></i> </button> <br><br> <strong>Basic Circular Buttons:</strong> <button class="circular ui icon basic green button"> <i class="icon leaf"></i> </button> <button class="circular ui icon basic blue button"> <i class="icon bolt"></i> </button> <button class="circular ui icon basic yellow button"> <i class="icon fire"></i> </button> <br><br> <strong>Normal circular Buttons:</strong> <button class="ui circular green button"> Follow </button> <button class="ui circular red button"> Delete </button> <button class="ui circular blue button"> Add </button> <br><br> </div> </center> </body> </html>
Producción
Botones circulares de variaciones de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#circular
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA