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!

Back to Blog