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 clase de tipo invertido.
Semantic-UI proporciona varias clases con botones para personalizar. En este artículo, veremos los botones de tipo invertido. La clase invertida ayuda a que el botón aparezca en fondos oscuros. La clase invertida debe mencionarse cuando queremos usar botones de tipo invertido:
Clase de tipo invertido de botón de interfaz de usuario semántica:
- invertido: esta clase debe usarse para usar el botón de tipo invertido.
Nota: Para usar el botón de tipo invertido, la clase segmento invertido debe mencionarse en el div.
Sintaxis:
<div class = "ui inverted segment"> <button class="ui inverted button"> .... </button> </div>
Ejemplo 1: aquí crearemos unos botones de tipo invertido.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <center> <body> <div class="ui container"> <h1 style="color:green">GeeksforGeeks</h1> <strong>Semantic-UI Inverted Type Button</strong> <div class="ui inverted segment"> <button class="ui inverted button">Like</button> <button class="ui inverted button">Share</button> <button class="ui inverted button">Subscribe</button> <button class="ui inverted button">Report</button> </div> </div> </body> </center> </html>
Producción:
Botón de interfaz de usuario semántica tipo invertido
Ejemplo 2: en este ejemplo, verá que el botón básico de tipo invertido se usa con las diferentes variantes de color.
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> <div class="ui container"> <h1 style="color:green">GeeksforGeeks</h1> <strong>Semantic-UI Inverted Type Button</strong> <br><br> <strong>Inverted Basic Colored Buttons:</strong> <div class="ui inverted segment"> <button class="ui inverted red basic button"> Basic Red </button> <button class="ui inverted orange basic button"> Basic Orange </button> <button class="ui inverted yellow basic button"> Basic Yellow </button> <button class="ui inverted olive basic button"> Basic Olive </button> <button class="ui inverted green basic button"> Basic Green </button> </div> </div> </center> </body> </html>
Producción:
Botón de interfaz de usuario semántica tipo invertido
Referencia: https://semantic-ui.com/elements/button.html#inverted
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA