Como crear un boton en HTML
Tutorial HTML » Boton en HTML
La etiqueta <button> de HTML se utiliza para crear un botón en el que se puede hacer clic. El botón puede contener texto y otras etiquetas como <strong>, <i>, <br>, <img>, etc. Estas disposiciones no las proporciona un botón creado con el elemento<input>.
La apariencia del botón se puede cambiar y manipular usando las propiedades de CSS3. Un botón consta de varios atributos que le informan al navegador sobre su curso de acción, desde que hace clic.
Sintaxis:
Estilo de botones en HTML - ejemplo
Podemos usar CSS3 para diseñar el botón. Los siguientes son algunos ejemplos.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
border: none;
background-color: #CCC;
font-size: 16px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
margin-left: 2px;
padding-top: 14px;
padding-right: 28px;
padding-bottom: 14px;
padding-left: 28px;
}.btn:hover {background: #eee;}
.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}
</style>
</head>
<body><h2>Estilo de botones en HTML - Text Buttons</h2>
<button class="btn success">Success</button>
</body>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>
</html>
Uso de botones de la propiedad Border-Radius - ejemplos
Podemos usar la propiedad border-radius para crear botones redondos.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: blue;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}.button1 {border-radius: 2px;}
<h2>Uso de botones de la propiedad Border-Radius</h2>
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<p>Podemos usar la propiedad del radio del borde para crear botones redondos.</p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
</body>
</html>
Etiquetas: botones en html ejemplos, input button html, input type=button'' onclick, html button onclick, input type=button css, html input button onclick, button type=button, input type=button> vs button
Botones de sombra HTML
Podemos mejorar los botones usando el efecto de sombra.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: blue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.49);
} </style>
</head>
<body>
<h2>Botones de sombra HTML</h2>
<p>Usar la propiedad box-shadow</p>
<button class="button button1">Botón de sombra</button>
</body>
</html>
Etiquetas: botón html con link, css, enlace, link otra pagina, href, on click, boton html link otra pagina, Cómo crear un botón HTML, como crear un boton en html con link, como hacer un boton con link, como crear un boton en html y css, como hacer que un boton html me lleve a otra pagina botones en html ejemplos, input button html, input type=button'' onclick, html button onclick, input type=button css, html input button onclick, button type=button, input type=button> vs button
Como crear un boton en HTML - html.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.