<button class="code btn-hover-up">Hover
Up</button>
.btn-hover-up{ background: var(--blue); }
.btn-hover-up:hover{ transform: translateY(-20%); }
No Javascript !
<button class="code btn-hover-scale
hidden-vertical"> Hover Scale </button>
.btn-hover-color{ background: var(--dark-purple); }
.btn-hover-color:hover{ background: var(--green); transform:
none; }
No Javascript !
<button class="code btn-hover-color
hidden-vertical"></button>
.btn-hover-scale{ background: var(--dark-green); }
button:hover{ box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em
1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em; transform:
translateY(-3px) scale(1.1); }
No Javascript !
<button
class="btn-hover-opacity"></button>
.btn-hover-opacity{ background: var(--red); }
.btn-hover-opacity:hover{ opacity: 0; transform: none; }
No Javascript !
<button class="code
btn-click-opacity">Opacity</button>
.btn-click-opacity{ background: var(--red-dark); }
.btn-click-opacity:focus-within{ opacity: 0; }
No Javascript !
<button class="btn-click-down"> Translate Down
</button>
.btn-click-down{ background: var(--light-blue); }
.btn-click-down:focus-within{ transform: translateY(30%); }
No Javascript !
<button class="btn-click-down"> Active Color
</button>
.btn-click-color{ background-color: var(--green); }
.btn-click-color:focus{ background-color: var(--red); }
No Javascript !
<button
class="btn-hover-opacity"></button>
.btn-hover-opacity{ background: var(--red); }
.btn-hover-opacity:hover{ opacity: 0; transform: none; }
No Javascript !