Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Puede ser utilizado directamente por CDN. Hay diferentes tipos de botones en la interfaz de usuario semántica. Proporciona una amplia gama de clases para colorear el botón, animar el botón y mucho más.
Ejemplo:
<!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> <div class="ui container"> <h1>Buttons in Semantic UI</h1> <button class="ui button"> Simple Button </button> <a class="ui button"> a tag Button </a> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Aquí simplemente usamos UI y clase de botón y ese botón ya se ve increíble.
Ejemplo: Veamos un botón de otro color.
<!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> <div class="ui container"> <h1>Different colout button in Semantic-UI</h1> <div> <button class="ui button">Standard</button> <button class="ui primary button">Primary</button> <button class="ui secondary button">Secondary</button> </div> <br> <div> <button class="ui red button">Standard</button> <button class="ui orange button">Primary</button> <button class="ui yellow button">Secondary</button> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Puedes usar muchos otros colores.
Ejemplo: botón invertido
<!-- Write HTML code here --> <!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> <div class="ui inverted segment container"> <h1>Different colout button in Semantic-UI</h1> <div> <button class="ui inverted button"> Standard </button> <button class="ui inverted primary button"> Primary </button> <button class="ui inverted secondary button"> Secondary </button> </div> <br> <div> <button class="ui inverted red button"> Standard</button> <button class="ui inverted orange button"> Primary</button> <button class="ui inverted yellow button"> Secondary</button> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo:
Botón de redes sociales
<!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> <div class="ui container"> <h1>Social Media Buttons</h1> <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 youtube button"> <i class="youtube icon"></i> YouTube </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> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo:
Botón de icono
<!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> <div class="ui container"> <h1>Icon Buttons</h1> <div class="ui icon buttons"> <button class="ui button"> <i class="bold icon"></i></button> <button class="ui button active"> <i class="underline icon"></i></button> <button class="ui button"> <i class="text width icon"></i></button> </div> <br> <br> <div class="ui icon buttons"> <button class="ui button"> <i class="pause icon"></i></button> <button class="ui button active"> <i class="play icon"></i></button> <button class="ui button"> <i class="shuffle icon"></i></button> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo:
Botón de diferente tamaño
<!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> <div class="ui container"> <h1>Different size buttons</h1> <button class="mini ui button"> Mini </button> <button class="tiny ui button"> Tiny </button> <button class="small ui button"> Small </button> <button class="medium ui button"> Medium </button> <button class="large ui button"> Large </button> <button class="big ui button"> Big </button> <button class="huge ui button"> Huge </button> <button class="massive ui button"> Massive </button> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Puede ejecutar estos ejemplos haciendo clic en Ejecutar en IDE.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA