Tutorials | YouTube / Paul Ozyzniewski / 27 Nov 2022
Animated Button - CSS Only
As a Senior Developer, I often miss creating simple things. That's why I decided to start making uncomplicated yet cool components every now and then. Such as this beautiful, animated button made using HTML and CSS only!
I invite all interested to watch and share your feedback in the comments section on youtube.
Source Code
Link to the GitHub repository
index.htmlhtml
<button class="btn"> <span class="btn__text"> <span class="btn__text--base">Hover effect</span> <span class="btn__text--hover">Yeah!</span> </span> <span class="btn__line btn__line--right"></span> <span class="btn__line btn__line--top"></span> <span class="btn__line btn__line--left"></span> <span class="btn__line btn__line--bottom"></span></button>style.csscss
/* SETUP */@import 'https://fonts.googleapis.com/css?family=Poppins:900i';:root { --font-size: 34px; --button-width: 300px; --button-height: 90px; --button-border-radius: 10px; --line-thickness: 4px; --padding: 0.7em; --color-text: #efefef; --color-border: #f2cf22; --color-bg: #282825;}* { box-sizing: border-box;}body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 100vh; background: var(--color-bg);}/* BTN */.btn { position: relative; width: var(--button-width); height: var(--button-height); overflow: hidden; font-size: var(--font-size); color: var(--color-text); cursor: pointer; background-color: transparent; border: var(--line-thickness) solid transparent; border-radius: var(--button-border-radius);}.btn .btn__text { position: relative; display: block; font-family: Poppins, sans-serif; transition: transform 0.8s ease-out 0.8s, color 0.4s 0.4s; transform: translateY(calc(var(--padding) / 1.1));}.btn .btn__text .btn__text--base,.btn .btn__text .btn__text--hover { position: absolute; top: 0; right: 0; left: 0; transform: translateY(-48%);}.btn .btn__text .btn__text--base { opacity: 1; transition: opacity 0.8s 0.8s;}.btn .btn__text .btn__text--hover { opacity: 0; transition: opacity 0s 0.4s;}.btn::before { position: absolute; top: 0; z-index: -1; display: block; width: 150%; height: 100%; content: ''; background-color: var(--color-border); transform: skew(-45deg) translate(-115%); animation: bg-out 0.8s;}.btn::after { position: absolute; right: calc(var(--padding) * 1.55); bottom: 0; left: calc(var(--padding) * 1.55); height: var(--line-thickness); content: ''; background: var(--color-border); transition: transform 1s ease-out 0.2s, right 0.2s ease-out 0.6s, left 0.4s ease-out 1s; transform-origin: left;}.btn__line { position: absolute; background: var(--color-border);}.btn__line--right,.btn__line--left { top: 0; bottom: 0; width: var(--line-thickness); transform: scale3d(1, 0, 1);}.btn__line--top,.btn__line--bottom { right: 0; left: 0; height: var(--line-thickness); transform: scale3d(0, 1, 1);}.btn__line--right { right: 0; transition: transform 0.2s ease-out 0.4s; transform-origin: top;}.btn__line--top { top: 0; transition: transform 0.2s ease-out 0.6s; transform-origin: left;}.btn__line--left { left: 0; transition: transform 0.2s ease-out 0.8s; transform-origin: bottom;}.btn__line--bottom { bottom: 0; transition: transform 0.2s ease-out; transform-origin: right;}/* ------------------------------ *//* HOVER */.btn:hover .btn__text { color: var(--color-bg); transition: transform 0.8s ease-out 0.4s, color 0.4s 0.4s; transform: translateY(0);}.btn:hover .btn__text .btn__text--base { opacity: 0; transition: opacity 0s 0.8s;}.btn:hover .btn__text .btn__text--hover { opacity: 1; transition: opacity 0s 1s;}.btn:hover::before { transform: skew(-45deg) translate(-15%); animation: bg-in 2s;}.btn:hover::after { right: 0; left: 0; transition: transform 0.6s ease-out 0.2s, right 0.2s ease-out, left 0s 0.6s; transform: scale3d(0, 1, 1); transform-origin: right;}.btn:hover .btn__line { transform: scale3d(1, 1, 1);}.btn:hover .btn__line--right { transition: transform 0.2s ease-out 0.2s; transform-origin: bottom;}.btn:hover .btn__line--top { transition: transform 0.2s ease-out 0.4s; transform-origin: right;}.btn:hover .btn__line--left { transition: transform 0.2s ease-out 0.6s; transform-origin: top;}.btn:hover .btn__line--bottom { transition: transform 0.2s ease-out 0.8s; transform-origin: left;}@keyframes bg-in { 0% { transform: skew(-45deg) translate(-115%); } 40% { transform: skew(-45deg) translate(-115%); } 100% { transform: skew(-45deg) translate(-15%); }}@keyframes bg-out { from { transform: skew(-45deg) translate(-15%); } to { transform: skew(-45deg) translate(100%); }}Thanks!