Creación de un menú con botones circulares en HTML 5 y CSS 3

En este post vamos a crear un menú horizontal en el que los botones sean circulares y tengan algún efecto. Para tal caso usaremos HTML 5 y CSS 3.

El código del html es muy corto, sólo usaremos el siguiente:

<nav><ul class="circulos">
<li><a href="http://www.google.com"><span>Google</span></a></li>
<li><a href="#"><span>Informacion</span></a></li>
<li><a href="#"><span>Servicios</span></a></li>
<li><a href="#"><span>Contacto</span></a></li>
</ul></nav>

Hasta aquí en la página sólo aparecerá una lista de links vertical, lo interesante es aplicar la hoja de estilos, la dividiremos en algunas partes:

ul.circulos { 
width: 100%; 
margin: 20px auto; 
text-align: center;
list-style-type: none; 
font: bold 14px arial;
} 
 
ul.circulos li { 
display: inline; 
margin: 0;
padding: 0;
}

Aquí definimos la clase círculos con la etiqueta <ul> y le damos un tamaño de ancho del 100% de la página. Un margen del 20% y una alineación centrada. Lógicamente todo esto se puede modificar, el ancho puede ser de 600px si quieren, la alineación puede ser a la derecha o izquierda, todo eso se puede modificar sabiendo un poco de inglés o usando el autocompletador de Dreamweaver.

Luego se define otra vez la clase círculos pero ahora con la etiqueta <ul> y <li>, Aquí es donde se aplica el efecto para que el menú se vea horizontal, con display:inline; la lista aparece lineal.

Ahora, definimos la etiqueta <a>

ul.circulos li a { 
display: inline-block;
text-decoration: none; 
color:#060; 
background:#999; 
padding: 5px;
width:120px; 
height:120px; 
-o-border-radius: 200px;
-moz-border-radius: 200px; 
-webkit-border-radius: 200px; 
-ms-border-radius: 200px;
border-radius: 200px;
}

Aquí es obvio lo que significa cada línea, solo podemos recalcar que aquí es donde se establece el tamaño de los botones con wisth y height. Como el propósito es hacer botones circulares, entonces los dos tamaños deben ser iguales.

Para dar el efecto circular, usamos border-radious, aplicando un 200px; se redondea todo el borde, en el código tenemos la opción para el navegador mozilla, IE, y otros, para que sea compatible con más navegadores.

ul.circulos a span { 
position: relative;
top:40%;
padding: 5px;
text-align: center;
} 
ul.circulos a:hover { 
background:#00F;
}

En éstas últimas líneas de código, se define span y hover.

Hover sirve para el efecto al pasar el cursor sobre el botón, en este caso solo cambiará el color del fondo.

Aquí vuelvo a colocar los códigos completos, incluyendo el de todo el HTML para que lo prueben en su computadora, aunque es obvio, guarden el html con extensión .html y el CSS con extensión .css

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="utf-8" />
 <title>Empezando con html5</title>
 <link rel="stylesheet" type="text/css" href="estilos.css" />
 </head>
 <body>
<header> <h1>Creando menú circular</h1>
<h2>Tutorial creado por Masterhacks</h2>
</header>
<nav><ul class="circulos">
<li><a href="http://www.google.com"><span>Google</span></a></li>
<li><a href="#"><span>Informacion</span></a></li>
<li><a href="#"><span>Servicios</span></a></li>
<li><a href="#"><span>Contacto</span></a></li>
</ul></nav>
<br /> <br />
<section>
<article>Aquí podemos poner cualquier texto</article>
</section>
<br />
<aside>Texto no importante</aside>
<br /> <br />
<footer>Derechos reservados</footer>
</body>
</html>

Código CSS:

@charset "utf-8";
/* CSS Document */
ul.circulos { 
width: 100%; 
margin: 20px auto; 
text-align: center;
list-style-type: none; 
font: bold 14px arial;
} 
 
ul.circulos li { 
display: inline; 
margin: 0;
padding: 0;
} 
 
ul.circulos li a { 
display: inline-block;
text-decoration: none; 
color:#060; 
background:#999; 
padding: 5px;
width:120px; 
height:120px; 
-o-border-radius: 200px;
-moz-border-radius: 200px; 
-webkit-border-radius: 200px; 
-ms-border-radius: 200px;
border-radius: 200px;
} 
ul.circulos a span { 
position: relative;
top:40%;
padding: 5px;
text-align: center;
} 
ul.circulos a:hover { 
background:#00F;
}

Grupo de WhatsApp: https://chat.whatsapp.com/Ch45FZaJcbxDb7WeHAOtAQ
Grupo de Telegram: https://t.me/Masterhacks_net

Donaciones
Gracias por apoyar el libre conocimiento!
Bitcoin: 3L2Y8LC5tmRffopnvv5J9DHe6wnrmyWVMm
Litecoin: MDtX7eRekxoRigMNtguziZqRdkr8CT5DKs
BCH: 3PnUezyhjWHQoBVfb1GpQJurMNbVjyvrVG
Ethereum: 0x1f786c3195b9a55e320848f240b1cfc37b159535

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *