La siguiente publicación está escrita por Brandon Pierce. Brandon vio algunos botones muy bien diseñados por Wouter en Dribbble y comenzó a construirlos con CSS. Salieron muy bien y accedió a publicar sobre el proceso aquí.
Esto es lo que vamos a hacer en este tutorial:
Ver demostración Descargar archivos
El código HTML básico
Usaremos una lista desordenada simple1 dentro de un <nav> etiqueta para crear nuestros botones.
<nav>
<ul class="nav">
<li><a href="https://css-tricks.com/circular-3d-buttons/#" class="icon-home"></a></li>
<li><a href="https://css-tricks.com/circular-3d-buttons/#" class="icon-cog"></a></li>
<li><a href="https://css-tricks.com/circular-3d-buttons/#" class="icon-cw"></a></li>
<li><a href="https://css-tricks.com/circular-3d-buttons/#" class="icon-location"></a></li>
</ul>
</nav>Algunos recursos
- Estos íconos en los botones provienen de la fuente de íconos Fontello y la aplicación web.
- El fondo texturizado es de Subtle Patterns.
CSS para la fuente del icono
Hay algunas maneras de hacerlo, pero vamos con esto:
@font-face {
font-family: 'fontello';
src: url('../fonts/fontello.eot');
src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontello.woff') format('woff'),
url('../fonts/fontello.ttf') format('truetype'),
url('../fonts/fontello.svg#fontello') format('svg');
font-weight: normal; font-style: normal;
}
[class*=" icon-"] {
font-family: 'fontello';
font-style: normal;
font-size: 3em;
speak: none;
}
.icon-home:after { content: "2302"; }
.icon-cog:after { content: "2699"; }
.icon-cw:after { content: "27f3"; }
.icon-location:after { content: "e724"; }CSS para los botones
Los botones se organizarán horizontalmente haciendo que los elementos de la lista inline-block. Los haremos chocar entre sí con un pequeño margen negativo (o vea estas otras técnicas).
.nav {
list-style: none;
text-align: center;
}
.nav li {
position: relative;
display: inline-block;
margin-right: -4px;
}La encantadora tridimensionalidad de los botones proviene de un sutil degradado y bisel y relieve cortesía de un par de box-shadows, uno normal y otro insertado. El ancho y la altura de los botones son idénticos creando un cuadrado, que se convierte en un círculo con border-radius. El line-height coincide con la altura y text-align está configurado en el centro, por lo que los íconos estarán centrados tanto horizontal como verticalmente.
.nav a {
display: block;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
color: #a7a7a7;
margin: 36px;
width: 144px;
height: 144px;
position: relative;
text-align: center;
line-height: 144px;
border-radius: 50%;
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}Podemos aplanar los botones un poco en :hover para crear un look planchado. Es posible que desee guardar eso para :active y hacer otra cosa por :hover, pero eso se lo dejamos a usted.
.nav a:hover{
text-decoration: none;
color: #555;
background: #f5f5f5;
}En este punto, nuestros botones deberían verse así:
No está mal, pero tenemos mucho camino por recorrer.
Ahora vamos a la parte divertida, vamos a usar pseudoelementos para darnos algunos elementos adicionales con los que trabajar para crear el resto de los efectos. Para crear el “surco” horizontal que ve entre cada botón, vamos a agregar el pseudoselector :before a nuestra lista de elementos. Usando un índice z negativo podemos mantenerlo debajo de todo. El doble border darle el aspecto de inserción. Los márgenes negativos que usamos en los elementos de la lista anteriormente son los que permiten que este surco parezca continuo. Aprovechamos el posicionamiento absoluto para centrar la línea.
.nav li:before {
content: "";
display: block;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: -1;
}Para esa tridimensionalidad adicional, crearemos un “pozo” alrededor de cada ancla en la que se asiente el botón. Podemos crear esto nuevamente sin HTML adicional usando un pseudo elemento.
.nav a:before {
content: "";
display: block;
background: #fff;
border-top: 2px solid #ddd;
position: absolute;
top: -18px;
left: -18px;
bottom: -18px;
right: -18px;
z-index: -1;
border-radius: 50%;
box-shadow: inset 0px 8px 48px #ddd;
}El tamaño del pozo (un poco más grande que el botón en sí) proviene de posicionarse absolutamente detrás del botón y estirarse usando valores de posicionamiento negativos (arriba/abajo/izquierda/derecha). El look 3D esta vez viene de arriba border y recuadro box-shadow creando una sombra interna.
¡Y hemos terminado!
Eso no fue tan malo, ¿verdad?
Ver demostración Descargar archivos
Compatibilidad con navegador
Estos botones usan una buena cantidad de CSS3 y algunos pseudo elementos que son CSS 2.1. Sin embargo, nada demasiado progresista. Cualquier versión de los últimos años de Safari, Chrome, Opera o Firefox no tendrá problemas. IE 8 no hace CSS3, por lo que recurre a esto:
No es un gran trato.
IE 7 es similar solo que sin la línea de “surco”, ya que no tiene pseudoelementos. Tampoco es gran cosa.
1 Es posible que las listas desordenadas no sean ideales para la navegación. Todavía los usamos aquí porque necesitábamos el elemento adicional.