W3.CSS proporciona diferentes clases que se pueden usar con diferentes etiquetas, como <button>, <a>, <input> y <label> para aplicar estilos de botones personalizados. W3.CSS también proporciona clases que se pueden usar para cambiar el color y el tamaño de los botones. W3.CSS contiene muchas clases para establecer el estilo del elemento del botón. La lista de clases de botones se proporciona a continuación:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
w3-btn |
Un botón rectangular regular que produce una sombra negra al pasar el mouse. |
|
2. |
botón w3 |
Un botón rectangular regular que cambia el color de fondo del botón a gris al pasar el mouse por encima. |
|
3. |
bloque w3 |
Se utiliza para crear botones de ancho completo. |
|
4. |
círculo w3 |
Se utiliza para crear botones circulares. |
|
5. |
ondulación w3 |
Se utiliza para crear efectos dominó en los botones. |
La implementación de botones con efectos de desplazamiento es la siguiente:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Button With Hover Effect in W3.CSS --> <div class="w3-container"> <!-- Button with background hover effect --> <h3 class="w3-text-blue"> Button With Background Hover Effect: </h3> <input class="w3-button w3-teal" type="button" value="Button"> <!-- Button with shadow hover effect --> <h3 class="w3-text-blue"> Button With Shadow Hover Effect: </h3> <input class="w3-btn w3-teal" type="button" value="Button"> </div> </body> </html>
Producción:
Nota: Los elementos <a>, <button> y <input> se utilizan para contener las clases de botón.
Botones de colores: también puede agregar fuentes y colores de fondo al texto mediante el uso de clases de color de W3.CSS. También puede agregar colores flotantes a los botones.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Title of the page -->
<title>GeeksForGeeks</title>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {
width: 130px;
}
</style>
</head>
<body>
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the
content of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<!-- Button With Different Colours in W3.CSS -->
<div class="w3-container">
<!-- Button with various background colours -->
<p class="w3-bar">
<button class="w3-button w3-red">
Red
</button>
<button class="w3-button w3-light-blue">
Light Blue
</button>
<button class="w3-button w3-lime">
Lime
</button>
<button class="w3-button w3-deep-orange">
D.Orange
</button>
</p>
<p class="w3-bar">
<button class="w3-button w3-pink">
Pink
</button>
<button class="w3-button w3-cyan">
Cyan
</button>
<button class="w3-button w3-sand">
Sand
</button>
<button class="w3-button w3-brown">
Brown
</button>
</p>
<p class="w3-bar">
<button class="w3-button w3-purple">
Purple
</button>
<button class="w3-button w3-aqua">
Aqua
</button>
<button class="w3-button w3-khaki">
Khaki
</button>
<button class="w3-button w3-blue-grey">
Blue Grey
</button>
</p>
<p class="w3-bar">
<button class="w3-button w3-deep-purple">
D.Purple
</button>
<button class="w3-button w3-teal">
Teal
</button>
<button class="w3-button w3-yellow">
Yellow
</button>
<button class="w3-button w3-light-grey">
Light Grey
</button>
</p>
<p class="w3-bar">
<button class="w3-button w3-indigo">
Indigo
</button>
<button class="w3-button w3-green">
Green
</button>
<button class="w3-button w3-amber">
Amber
</button>
<button class="w3-button w3-grey">
Grey
</button>
</p>
<p class="w3-bar">
<button class="w3-button w3-blue">
Blue
</button>
<button class="w3-button w3-light-green">
Light Green
</button>
<button class="w3-button w3-orange">
Orange
</button>
<button class="w3-button w3-dark-grey">
Dark Grey
</button>
</p>
</div>
</body>
</html>
Producción:
Botones circulares: la clase w3-circle de W3.CSS se puede usar para botones circulares en una página web.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Circular Button With Different Colours in W3.CSS --> <div class="w3-container"> <!-- Circular Button with various background colours --> <h3>Circular Buttons:</h3> <button class="w3-button w3-large w3-circle w3-purple">G </button> <button class="w3-button w3-large w3-circle w3-deep-orange">F </button> <button class="w3-button w3-large w3-circle w3-blue">G </button> </div> </body> </html>
Producción:
Efecto dominó: puede agregar un efecto dominó a los botones utilizando la clase w3-ripple de W3.CSS. El efecto dominó es parte de la tendencia del diseño moderno. Lo has visto en muchos sitios web, especialmente en el lenguaje de diseño de materiales de Google. Da un efecto de presión de botón.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Title of the page --> <title>GeeksForGeeks</title> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2> </div> <!-- Button with ripple effect in W3.CSS --> <div class="w3-container"> <!-- Button with ripple effect --> <h3 class="w3-text-blue">Button With Ripple Effect:</h3> <div class="w3-center"> <button class="w3-button w3-ripple w3-large w3-purple"> Enter GFG </button> </div> </div> </body> </html>
Producción:
Botones redondos: se pueden usar las clases redondas de W3.CSS para crear botones de bordes redondos para las páginas web.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Button with Round Borders in W3.CSS --> <div class="w3-container"> <!-- Button with round borders --> <h3 class="w3-text-blue"> Button With Round Borders: </h3> <button class="w3-button w3-ripple w3-large w3-purple"> Normal Button </button><br><br> <button class="w3-round w3-button w3-ripple w3-large w3-purple"> w3-round Button </button><br><br> <button class="w3-round-large w3-button w3-ripple w3-large w3-purple"> w3-round-large Button </button><br><br> <button class="w3-round-xlarge w3-button w3-ripple w3-large w3-purple"> w3-round-xlarge Button </button><br><br> <button class="w3-round-xxlarge w3-button w3-ripple w3-large w3-purple"> w3-round-xxlarge Button </button> </div> </body> </html>
Producción:
Tamaños de botón: W3.CSS proporciona diferentes clases que permiten cambiar el tamaño del botón. Las clases .w3-small y .w3-jumbo se usan para botones grandes y pequeños.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Title of the page --> <title>GeeksForGeeks</title> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Button with various sizes in W3.CSS --> <div class="w3-container"> <!-- Button with various sizes --> <h3 class="w3-text-blue"> Button With Various Sizes: </h3> <button class="w3-small w3-button w3-purple"> w3-small Button </button><br><br> <button class="w3-large w3-button w3-purple"> w3-large Button </button><br><br> <button class="w3-xxlarge w3-button w3-purple"> w3-xxlarge Button </button><br><br> <button class="w3-jumbo w3-button w3-purple"> w3-jumbo Button </button> </div> </body> </html>
Producción:
Botones de estado deshabilitados: el atributo deshabilitado se usa con el elemento <button> para establecer el estado deshabilitado del botón.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Button with disabled state in W3.CSS --> <div class="w3-container"> <!-- Button with disabled state --> <h3 class="w3-text-blue"> Button With Disabled State: </h3> <button class="w3-button w3-green w3-round"> Active Button </button> <button class="w3-button w3-blue w3-round" disabled> Disabled Button </button> </div> </body> </html>
Producción:
Botones de nivel de bloque: la clase de bloque .w3 de W3.CSS se utiliza para crear un botón de nivel de bloque que ocupa todo el ancho del elemento principal.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Block Button in W3.CSS --> <div class="w3-container"> <!-- Block Button --> <h3 class="w3-text-blue"> Block Level Button: </h3> <button class="w3-button w3-block w3-green w3-round"> Block Button </button> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA