La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
En este artículo, aprenderemos sobre los diferentes tipos de botones. El tipo de botón se utiliza para especificar el tipo de botón. Hay 8 tipos de botones en la interfaz de usuario de Semántica.
Tipos de botones:
- Botón: Se utiliza para un botón estándar.
- Básico : Se utiliza para un botón normal.
- Énfasis : podemos dar formato a los botones para mostrar diferentes niveles de énfasis.
- Animado : Se utiliza para animar botones.
- Etiquetado : Sirve para añadir una etiqueta a nuestro botón.
- Icono : Se utiliza para convertir un botón en un icono.
- Icono Etiquetado : Se utiliza para hacer un botón con un icono etiquetado
- Invertida : Se utiliza para hacer un botón que puede aparecer sobre un fondo oscuro.
Sintaxis:
<button class="ui button">...</button>
Ejemplo 1: Se implementan los diferentes botones. Consulte la salida para una mejor comprensión.
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" />
<style>
button {
width: 170px;
}
.container {
width: 600px;
margin-left: 10%;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Button Types</strong>
</center>
<br><br>
<div class="container">
<div>
<strong>Button:</strong>
<button class="ui button">Trash</button>
<button class="ui green button">Subscribe</button>
<button class="ui red button">Unsubscribe</button>
</div>
<br>
<div>
<strong>Basic:</strong>
<button class="ui basic button">
<i class="icon user"></i>
Add Friend
</button>
<button class="ui basic button">
<i class="icon plus"></i>
Follow
</button>
<button class="ui basic button">
<i class="icon minus"></i>
Un Follow
</button>
</div>
<br>
<div>
<strong>Emphasis:</strong>
<button class="ui primary button">Save</button>
<button class="ui secondary button">Delete</button>
</div>
<br>
<div>
<strong>Animated:</strong>
<div class="ui vertical animated button">
<div class="hidden content">Shop</div>
<div class="visible content">
<i class="shop icon"></i>
</div>
</div>
<div class="ui vertical animated button">
<div class="hidden content">Setting</div>
<div class="visible content">
<i class="setting icon"></i>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Tipos de botones de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
button {
width: 150px;
}
.container {
width: 600px;
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">GeeksforGeeks</h1>
<strong>Semantic UI Button Types</strong>
</center>
<br><br>
<div class="container">
<div>
<strong>Inverted:</strong>
<button class="ui inverted purple button">Trash</button>
<button class="ui inverted green button">Subscribe</button>
<button class="ui inverted red button">Unsubscribe</button>
</div>
<br>
<div>
<strong>Labeled Icon:</strong>
<button class="ui left labeled icon button">
<i class="left arrow icon"></i>
Previous
</button>
<button class="ui labeled icon button">
<i class="pause icon"></i>
Pause
</button>
<button class="ui right labeled icon button">
<i class="right arrow icon"></i>
Next
</button>
</div>
<br>
<div>
<strong>Icon:</strong>
<button class="ui icon blue button">
<i class="cloud icon"></i>
</button>
<button class="ui icon button">
<i class="bed icon"></i>
</button>
<button class="ui icon yellow button">
<i class="fire icon"></i>
</button>
</div>
<br>
<div>
<strong>Labeled:</strong>
<div class="ui labeled button" tabindex="0">
<div class="ui red button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic left pointing label">
2,048
</a>
</div>
<div class="ui left labeled button">
<a class="ui basic right pointing label">
2,048
</a>
<div class="ui button">
<i class="user icon"></i>Follower
</div>
</div>
<div class="ui left labeled button">
<a class="ui basic right pointing label">
1,048
</a>
<div class="ui icon blue button">
<i class="fork icon"></i>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Tipos de botones de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#button
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA