Semantic-UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap. En este artículo veamos los botones de tipo básico.
La interfaz de usuario semántica proporciona clases integradas para botones animados que mejoran la interfaz de la experiencia. Para usar el botón animado, debemos mencionar la clase animada y la transición que necesitamos.
Clase animada de tipo de botón de interfaz de usuario semántica:
- animada: esta clase se utiliza para configurar la animación.
- fundido animado: esta clase se utiliza para establecer la animación del efecto de fundido.
Nota: El eje predeterminado es horizontal, puede hacerlo vertical usando la clase vertical.
Sintaxis:
<button class="ui animated-class button"> ... </button>
Ejemplo: Usar clase animada.
HTML
<!DOCTYPE html> <html> <head> <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 Type Animated</strong> <br> <div class="ui green animated button"> <div class="visible content"> *Annual Subscription </div> <div class="hidden content"> Pay $12 </div> </div> <div class="ui green animated button"> <div class="visible content"> Monthly Subscription </div> <div class="hidden content"> Pay $1.5 </div> </div> </center> </body> </html>
Producción:
Tipo de botón de interfaz de usuario semántica animado
Ejemplo 2: En este ejemplo, cambiaremos el eje de la animación de horizontal a vertical usando una clase vertical animada sin botones.
HTML
<!DOCTYPE html> <html> <head> <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 Type Animated</strong> <br> <div class="ui green animated button"> <div class="visible content"> Horizontal Animated </div> <div class="hidden content"> Pay $12 </div> </div> <div class="ui green vertical animated button"> <div class="visible content"> Vertical Animated </div> <div class="hidden content"> Pay $1.5 </div> </div> </center> </body> </html>
Producción:
Tipo de botón de interfaz de usuario semántica animado
Ejemplo: En este ejemplo, usaremos la clase animada Fade.
HTML
<!DOCTYPE html> <html> <head> <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 Type Animated</strong> <br> <div class="ui green fade animated button"> <div class="visible content"> Fade Animated </div> <div class="hidden content"> Pay $12 </div> </div> <div class="ui green animated button"> <div class="visible content"> Normal Animated </div> <div class="hidden content"> Pay $1.5 </div> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/button.html#animated
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA