AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Botones en CSS


Next Page >>
HTML images

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:

.boton1 {
/* Definir propiedades aquí */
}

 

 

Colores de botones CSS

Utilice la propiedad background-color para cambiar el color de fondo de un botón:

Ejemplo

<!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:

Ejemplo

<!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:

Ejemplo

<!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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...