Botones en CSS
CSS Tutorial » Boton en CSS
Los botones son uno de los componentes más importantes de cualquier página web y tienen muchos estados y funciones diferentes que deben coincidir correctamente con las decisiones de diseño anteriores.
En este artículo, cubriremos la mentalidad de diseño de tres botones, junto con el código CSS y las herramientas para ayudar a los nuevos desarrolladores a crear sus propios botones.
Sintaxis:
/* Definir propiedades aquí */
}
Colores de botones CSS
Utilice la propiedad background-color para cambiar el color de fondo de un botón:
<!DOCTYPE html>
<html>
<head>
<style>
.boton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}.boton2 {background-color: #008CBA;} /* Blue */
.boton3 {background-color: #f44336;} /* Red */
.boton4 {background-color: #e7e7e7; color: black;} /* Gray */
.boton5 {background-color: #555555;} /* Black */
</style>
</head>
<body><h2>Button Colors</h2>
<p>Cambie el color de fondo de un botón con la propiedad background-color:</p><button class="boton">Verde</button>
<button class="boton boton2">Azul</button>
<button class="boton boton3">Rojo</button>
<button class="boton boton4">Gris</button>
<button class="boton boton5">Negro</button></body>
</html>
Etiquetas: Boton en CSS, botones en css3 y html ejemplos con imagenes, como hacer boton, centrar, alinear. mover botones en css
Tamaños de botones
Use the font-size property to change the font size of a button:
<!DOCTYPE html>
<html>
<head>
<style>
.boton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}.boton2 {background-color: #008CBA; font-size: 18px} /* Blue */
.boton3 {background-color: #f44336; font-size: 22px} /* Red */
.boton4 {background-color: #e7e7e7; color: black; font-size: 28px} /* Gray */
.boton5 {background-color: #555555; font-size: 32px} /* Black */
</style>
</head>
<body><h2>Button Colors</h2>
<p>Cambie el color de fondo de un botón con la propiedad background-color:</p><button class="boton">Verde</button>
<button class="boton boton2">Azul_18px</button>
<button class="boton boton3">Rojo_22px</button>
<button class="boton boton4">Gris_28px</button>
<button class="boton boton5">Negro 2px</button>
</body>
</html>
Botones con esquinas redondeadas
Use la propiedad border-radius para agregar esquinas redondeadas a un botón:
<!DOCTYPE html>
<html>
<head>
<style>
.boton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}.boton2 {background-color: #008CBA; font-size: 18px; border-radius: 8px;} /* Blue */
.boton3 {background-color: #f44336; font-size: 22px; border-radius: 14px;} /* Red */
.boton4 {background-color: #e7e7e7; color: black; font-size: 26px; border-radius: 26px;} /* Gray */
.boton5 {background-color: #555555; font-size: 32px; border-radius: 50px;} /* Black */
</style>
</head>
<body><h2>Botones redondeados</h2>
<p>Agregue esquinas redondeadas a un botón con la propiedad border-radius:</p><button class="boton">Verde</button>
<button class="boton boton2">Azul_18px</button>
<button class="boton boton3">Rojo_22px</button>
<button class="boton boton4">Gris_28px</button>
<button class="boton boton5">Negro 40px</button>
</body>
</html>
Etiquetas: Boton en CSS, botones en css3 y html ejemplos con imagenes, como hacer boton, centrar, alinear. mover botones en css
Botones en CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.