El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton { background: url( http://www.ashleyjt.net/windows/images/Android.png ) /* Url de la imagen */ no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%; /* Tamaño de la imagen */ height: 200px; /* Alto del botón */ width: 200px; /* Ancho del botón */ display: table; border-radius: 100%; cursor: pointer; box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active { box-shadow: inset 0 5px 30px rgba(0,0,0,.2); /* S