Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Las variaciones de botones de la interfaz de usuario semántica nos ofrecen muchas variaciones en botones como botones adjuntos sociales, de tamaño, flotantes, de color, compactos, de alternancia, positivos, negativos, fluidos, circulares, verticales y horizontales. Aquí en este artículo, discutiremos la variación flotante. Variaciones de botón de interfaz de usuario semántica Social se utiliza para crear un botón de icono social en diferentes.
Variaciones de botón de interfaz de usuario semántica Clase de variante social:
- social-icon-name: Este no es el nombre de la clase que tienes que usar, aquí tienes que mencionar el nombre de la plataforma social en minúsculas como Facebook, youtube. Y no olvide incluir el icono dentro del elemento del botón.
Sintaxis:
<button class="ui social-icon-name button"> <i class="... icon"></i> .... </button>
El siguiente ejemplo ilustra la variante social de variaciones de botón de interfaz de usuario semántica:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
.container {
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeks</h1>
<strong>
Semantic-UI Button Variations
Social Variant
</strong>
</center>
<br><br>
<div class="container">
<strong>Social Variant Normal buttons:</strong>
<br>
<button class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</button>
<button class="ui twitter button">
<i class="twitter icon"></i>
Twitter
</button>
<button class="ui linkedin button">
<i class="linkedin icon"></i>
LinkedIn
</button>
<button class="ui instagram button">
<i class="instagram icon"></i>
Instagram
</button>
<button class="ui youtube button">
<i class="youtube icon"></i>
YouTube
</button>
<br><br>
<strong>Social Variant Basic buttons:</strong>
<br>
<button class="ui facebook basic button">
<i class="facebook icon"></i>
Facebook
</button>
<button class="ui twitter basic button">
<i class="twitter icon"></i>
Twitter
</button>
<button class="ui linkedin basic button">
<i class="linkedin icon"></i>
LinkedIn
</button>
<button class="ui instagram basic button">
<i class="instagram icon"></i>
Instagram
</button>
<button class="ui youtube basic button">
<i class="youtube icon"></i>
YouTube
</button>
</div>
</body>
</html>
Producción:
Variaciones de botón de interfaz de usuario semántica Variante social
Referencia: https://semantic-ui.com/elements/button.html#social
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA