ómo crear un botón simple con HTML y CSS para mi web
En este artículo vamos a aprender a crear botones muy simples en nuestra página web WordPress o cualquier tipo de CMS.
No usaremos módulos ni plugin, lo haremos con HTML Y CSS de forma muy sencilla, así evitamos renderizar la web con tanto peso de plugins instalados.
≫ 1 – Como primer paso creamos un archivo HTML con el siguiente código básico.
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="mi-boton">Haz clic aquí</button>
</body>
</html>
.mi-boton {
background-color: #4CAF50; /* Fondo verde */
border: none; /* Sin borde */
color: white; /* Texto blanco */
padding: 10px 20px; /* Espaciado del contenido */
text-align: center; /* Centrar el texto */
text-decoration: none; /* Sin subrayado */
display: inline-block; /* Botón en línea */
font-size: 16px; /* Tamaño de fuente */
margin: 4px 2px; /* Margen superior e inferior */
cursor: pointer; /* Cambio de cursor al pasar por encima */
border-radius: 10px; /* Borde redondeado */
}
En este código, hemos definido los estilos para la clase mi-boton. Hemos establecido un fondo verde, sin borde, con texto blanco y un espaciado del contenido de 10px en la parte superior e inferior y 20px en los lados. También hemos centrado el texto, eliminado cualquier subrayado, establecido el botón en línea y el tamaño de fuente en 16px. Hemos agregado un margen de 4px en la parte superior e inferior y hemos establecido el cursor en pointer (manita) al pasar por encima. Finalmente, hemos redondeado los bordes con border-radius.
Con estos pasos, habrás creado un botón simple con HTML y CSS para tu página web. Puedes personalizarlo según la forma que sea tus necesidades.
