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

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

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.

Califica este post

Trabaja con nuestra Agencia de Marketing

SEO en Bogotá

Visitar a Margetc