Button hover effects with box-shadow

Button hover effects with box-shadow | Botones hermosos con efectos box-shadow solo con CSS

By Giana


 <div class="buttons"> <div class="buttons"> <button class="fill">Fill In</button> <button class="pulse">Pulse</button> <button class="close">Close</button> <button class="raise">Raise</button> <button class="up">Fill Up</button> <button class="slide">Slide</button> <button class="offset">Offset</button> </div>


CSS

.fill:focus,.fill:hover{box-shadow:inset 0 0 0 2em var(--hover)}
.pulse:focus,.pulse:hover{-webkit-animation:pulse 1s;animation:pulse 1s;box-shadow:0 0 0 2em rgba(255,255,255,0)}
@-webkit-keyframes pulse{0%{box-shadow:0 0 var(--hover)}}
@keyframes pulse{0%{box-shadow:0 0 var(--hover)}}
.close:focus,.close:hover{box-shadow:inset -3.5em 0 0 0 var(--hover),inset 3.5em 0 0 0 var(--hover)}
.raise:focus,.raise:hover{box-shadow:0 .5em .5em -.4em var(--hover);-webkit-transform:translateY(-.25em);transform:translateY(-.25em)}
.up:focus,.up:hover{box-shadow:inset 0 -3.25em 0 0 var(--hover)}
.slide:focus,.slide:hover{box-shadow:inset 6.5em 0 0 0 var(--hover)}
.offset{box-shadow:.3em .3em 0 0 var(--color),inset .3em .3em 0 0 var(--color)}
.offset:focus,.offset:hover{box-shadow:0 0 var(--hover),inset 6em 3.5em 0 0 var(--hover)}
.fill{--color:#a972cb;--hover:#cb72aa}
.pulse{--color:#ef6eae;--hover:#ef8f6e}
.close{--color:#ff7f82;--hover:#ffdc7f}
.raise{--color:#ffa260;--hover:#e5ff60}
.up{--color:#e4cb58;--hover:#94e458}
.slide{--color:#8fc866;--hover:#66c887}
.offset{--color:#19bc8b;--hover:#1973bc}
button{color:var(--color);transition:.25s}
button:focus,button:hover{border-color:var(--hover);color:#fff}
body{color:#fff;background:#17181c;font:300 1em 'Fira Sans',sans-serif;justify-content:center;align-content:center;align-items:center;text-align:center;min-height:100vh;display:flex}
button{background:0 0;border:2px solid;font:inherit;line-height:1;margin:.5em;padding:1em 2em}
h1{font-weight:400}
code{color:#e4cb58;font:inherit}

¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

CSS Border Transitions
Sign-post arrow buttons with CSS