Botones con HTML y CSS: guía paso a paso [PRINCIPIANTES]

Tabla de contenido

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>

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional

Este código que hemos creado es una etiqueta botón de HTML donde le hemos asignado una clase llamada ‘mi-boton’ así podemos darle un poco de estilos CSS a nuestro botón.

≫ 2 - Como siguiente paso creamos un archivo CSS con el siguiente código.

				
					.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 */
}

¡Optimiza tu sitio web al 100% y mejora tu posicionamiento en los resultados de búsqueda! Descubre cómo con nuestra guía gratuita.

Información

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.

Leonela de Lima

Aficionada del marketing digital, con habilidad en diseños de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo FULLFREELANCER. En sus tiempos libres, le agrada desarrollar proyectos o leer un libro.