Sign-Post Arrow Buttons ✔ Botones de Flechas con【CSS】

Sign-post arrow buttons with CSS | Botones de flechas solo con CSS | arrow buttons boton css

By Giana

DEMO
HTML

<p><button class="btn-right"><a href="#">Right</a></button></p>
<p><button class="btn-left"><a href="#">Left</a></button></p>
<p><button class="btn-up"><a href="#">Up</a></button>
<button class="btn-down"><a href="#">Down</a></button></p>

CSS

.btn-right{background:0 0;border:0;font-size:22px;line-height:2em;position:relative;width:8em;height:2em}
.btn-right a{color:#fff;text-decoration:none;position:relative;z-index:10}
.btn-right::after,.btn-right::before{background:#29c0d5;border-radius:2px;content:'';display:block;position:absolute;left:0;right:0;-webkit-transition:all 1s;transition:all 1s;height:1em}
.btn-right::before{box-shadow:-1px 1px 0 #1897c0,-2px 2px 0 #1897c0,-3px 3px 0 #1897c0,-4px 4px 0 #1897c0;-webkit-transform:skew(45deg);transform:skew(45deg);top:0}
.btn-right::after{box-shadow:1px 1px 0 #1897c0,2px 2px 0 #1897c0,3px 3px 0 #1897c0,4px 4px 0 #1897c0;-webkit-transform:skew(-45deg);transform:skew(-45deg);bottom:0}
.btn-right:hover::after,.btn-right:hover::before{background:#68d3e2}
.btn-right:focus{outline:0}
.btn-right:focus::after,.btn-right:focus::before{background:#68d3e2}
.btn-left{background:0 0;border:0;font-size:22px;line-height:2em;position:relative;width:8em;height:2em}
.btn-left a{color:#fff;text-decoration:none;position:relative;z-index:10}
.btn-left::after,.btn-left::before{background:#e4135d;border-radius:2px;content:'';display:block;position:absolute;left:0;right:0;-webkit-transition:all 1s;transition:all 1s;height:1em}
.btn-left::before{box-shadow:-1px 1px 0 #c81163,-2px 2px 0 #c81163,-3px 3px 0 #c81163,-4px 4px 0 #c81163;-webkit-transform:skew(45deg);transform:skew(45deg);bottom:0;z-index:1}
.btn-left::after{box-shadow:1px 1px 0 #c81163,2px 2px 0 #c81163,3px 3px 0 #c81163,4px 4px 0 #c81163;-webkit-transform:skew(-45deg);transform:skew(-45deg);top:0}
.btn-left:hover::after,.btn-left:hover::before{background:#f1538b}
.btn-left:focus{outline:0}
.btn-left:focus::after,.btn-left:focus::before{background:#f1538b}
.btn-up{background:0 0;border:0;font-size:22px;line-height:3em;position:relative;width:4em;height:3em;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
.btn-up a{color:#fff;text-decoration:none;position:relative;z-index:10}
.btn-up::after,.btn-up::before{background:#e4135d;border-radius:2px;content:'';display:block;position:absolute;left:0;right:0;-webkit-transition:all 1s;transition:all 1s;height:1.5em}
.btn-up::before{box-shadow:-1px 1px 0 #c81163,-2px 2px 0 #c81163,-3px 3px 0 #c81163,-4px 4px 0 #c81163;-webkit-transform:skew(45deg);transform:skew(45deg);top:0}
.btn-up::after{box-shadow:1px 1px 0 #c81163,2px 2px 0 #c81163,3px 3px 0 #c81163,4px 4px 0 #c81163;-webkit-transform:skew(-45deg);transform:skew(-45deg);bottom:0}
.btn-up:hover::after,.btn-up:hover::before{background:#f1538b}
.btn-up:focus{outline:0}
.btn-up:focus::after,.btn-up:focus::before{background:#f1538b}
.btn-down{background:0 0;border:0;font-size:22px;line-height:4em;position:relative;width:6em;height:4em;-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-top:3em}
.btn-down a{color:#fff;text-decoration:none;position:relative;z-index:10}
.btn-down::after,.btn-down::before{background:#29c0d5;border-radius:2px;content:'';display:block;position:absolute;left:0;right:0;-webkit-transition:all 1s;transition:all 1s;height:2em}
.btn-down::before{box-shadow:-1px 1px 0 #1897c0,-2px 2px 0 #1897c0,-3px 3px 0 #1897c0,-4px 4px 0 #1897c0;-webkit-transform:skew(45deg);transform:skew(45deg);top:0}
.btn-down::after{box-shadow:1px 1px 0 #1897c0,2px 2px 0 #1897c0,3px 3px 0 #1897c0,4px 4px 0 #1897c0;-webkit-transform:skew(-45deg);transform:skew(-45deg);bottom:0}
.btn-down:hover::after,.btn-down:hover::before{background:#68d3e2}
.btn-down:focus{outline:0}
.btn-down:focus::after,.btn-down:focus::before{background:#68d3e2}
@-webkit-keyframes zoom{25%{-webkit-transform:scale3d(1.5,1.5,0);transform:scale3d(1.5,1.5,0)}
50%{-webkit-transform:scale3d(1,1,0);transform:scale3d(1,1,0)}
75%{-webkit-transform:scale3d(1.25,1.25,0);transform:scale3d(1.25,1.25,0)}}
@keyframes zoom{25%{-webkit-transform:scale3d(1.5,1.5,0);transform:scale3d(1.5,1.5,0)}
50%{-webkit-transform:scale3d(1,1,0);transform:scale3d(1,1,0)}
75%{-webkit-transform:scale3d(1.25,1.25,0);transform:scale3d(1.25,1.25,0)}}
@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
body{background:#fefefe;font-family:"Noto sans",sans-serif;text-align:center;margin:3em 0}
h1{color:#0b1421;font-weight:400}
button a{top:-2px}
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!