Webleb - UI Elements - Magic Animation Button

HTML

<!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
      <link rel="stylesheet" href="./style.css">

<title>Andev Web</title>
   </head>
   <body>
      <div class="container">
         <a href="#" class="button">
            <div class="button__content">
               <span class="button__text">Hover  Me</span>

CSS

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --gradient-color: linear-gradient(90deg,
                    hsl(48, 100%, 50%) 0%,
                    hsl(28, 100%, 54%, 100%));
  --black-color: hsl(225, 15%, 6%);
  --reflection-color: hsla(48, 30%, 95%, .3);
  --body-color: hsl(0, 0%, 100%);

/*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: 1rem;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: #151F28;
}

a {
  text-decoration: none;
}

/*=============== BUTTON ===============*/
.container {
  height: 100vh;
  margin-inline: 1.5rem;
  display: grid;
  place-items: center;
}

.button {
  position: relative;
  transition: transform .4s;
}

.button__content {
  position: relative;
  background: var(--gradient-color);
  padding: 1.25rem 3rem;
  border-radius: 4rem;
  border: 3px solid var(--black-color);
  color: var(--black-color);
  display: flex;
  align-items: center;
  column-gap: .5rem;
  overflow: hidden;
}

.button__text {
  font-weight: 700;
}

.button__icon {
  font-size: 1.5rem;
}

.button__text, 
.button__icon {
  position: relative;
  z-index: 2;
}

/* Reflection shapes */
.button__reflection-1, 
.button__reflection-2 {
  width: 8px;
  height: 120px;
  background-color: var(--reflection-color);
  rotate: 30deg;
  position: absolute;
  inset: 0;
  top: 0;
  left: -180%;
  margin: auto;
  transition: left .6s cubic-bezier(.2, .5, .2, 1.2);
}

.button__reflection-1::after {
  content: "";
  width: 26px;
  height: 100%;
  background-color: var(--reflection-color);
  position: absolute;
  top: -1rem;
  left: 1.25rem;
}

.button__reflection-2::after {
  content: "";
  width: 40px;
  height: 100%;
  background-color: var(--reflection-color);
  position: absolute;
  top: -1rem;
  left: .8rem;
}

/* Moving geometric shapes */
.button img {
  position: absolute;
  opacity: 0;
  transition: transform .5s, opacity .5s;
}

.button__star-1 {
  width: 20px;
  top: -14px;
  left: -16px;
  transform: rotate(48deg) scale(.1);
}

.button__star-2 {
  width: 40px;
  right: -10px;
  top: -4px;
  transform: rotate(-48deg) scale(.1);
}

.button__circle-1, 
.button__circle-2 {
  width: 8px;
}

.button__circle-1 {
  top: -8px;
  left: 58px;
  transform: scale(.1);
}

.button__circle-2 {
  right: 34px;
  bottom: -8px;
  transform: scale(.1);
}

.button__diamond {
  width: 18px;
  top: -18px;
  right: 62px;
  transform: scale(.1);
}

.button__triangle {
  width: 30px;
  left: 15px;
  bottom: -16px;
  transform: rotate(-48deg) scale(.1);
}

/* Gradient shadow */
.button__shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--gradient-color);
  padding: 1.25rem 3rem;
  border-radius: 4rem;
  border: 3px solid var(--black-color);
  z-index: -1;
  transition: transform .3s;
}

/* View shadow gradient */
.button:hover .button__shadow {
  transform: translate(-.5rem, .5rem);
}

/* Move reflection */
.button:hover .button__reflection-1 {
  left: 120%;
}

.button:hover .button__reflection-2 {
  left: -70%;
}

/* View geometric shapes */
.button:hover {
  transform: rotate(-4deg) scale(1.1);
}

.button:hover img {
  opacity: 1;
}

.button:hover .button__star-1 {
  transform: scale(1.1);
  transition-delay: .1s;
}

.button:hover .button__star-2 {
  transform: scale(1.1);
}

.button:hover .button__circle-1 {
  transform: translateY(-8px) scale(1.1);
  transition-delay: .1s;
}

.button:hover .button__circle-2 {
  transform: translate(-20px, 20px) scale(1.1);
}

.button:hover .button__diamond {
  transform: translateY(7px) rotate(-24deg) scale(1.1);
}

.button:hover .button__triangle {
  transform: rotate(-12deg) scale(1.1);
}/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --gradient-color: linear-gradient(90deg,
                    hsl(48, 100%, 50%) 0%,
                    hsl(28, 100%, 54%, 100%));
  --black-color: hsl(225, 15%, 6%);
  --reflection-color: hsla(48, 30%, 95%, .3);
  --body-color: hsl(48, 100%, 98%);

/*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: 1rem;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
}

a {
  text-decoration: none;
}

/*=============== BUTTON ===============*/
.container {
  height: 100vh;
  margin-inline: 1.5rem;
  display: grid;
  place-items: center;
}

.button {
  position: relative;
  transition: transform .4s;
}

.button__content {
  position: relative;
  background: var(--gradient-color);
  padding: 1.25rem 3rem;
  border-radius: 4rem;
  border: 3px solid var(--black-color);
  color: var(--black-color);
  display: flex;
  align-items: center;
  column-gap: .5rem;
  overflow: hidden;
}

.button__text {
  font-weight: 700;
  font-size: 20px;
}

.button__icon {
  font-size: 1.5rem;
}

.button__text, 
.button__icon {
  position: relative;
  z-index: 2;
}

/* Reflection shapes */
.button__reflection-1, 
.button__reflection-2 {
  width: 8px;
  height: 120px;
  background-color: var(--reflection-color);
  rotate: 30deg;
  position: absolute;
  inset: 0;
  top: 0;
  left: -180%;
  margin: auto;
  transition: left .6s cubic-bezier(.2, .5, .2, 1.2);
}

.button__reflection-1::after {
  content: "";
  width: 26px;
  height: 100%;
  background-color: var(--reflection-color);
  position: absolute;
  top: -1rem;
  left: 1.25rem;
}

.button__reflection-2::after {
  content: "";
  width: 40px;
  height: 100%;
  background-color: var(--reflection-color);
  position: absolute;
  top: -1rem;
  left: .8rem;
}

/* Moving geometric shapes */
.button img {
  position: absolute;
  opacity: 0;
  transition: transform .5s, opacity .5s;
}

.button__star-1 {
  width: 20px;
  top: -14px;
  left: -16px;
  transform: rotate(48deg) scale(.1);
}

.button__star-2 {
  width: 40px;
  right: -10px;
  top: -4px;
  transform: rotate(-48deg) scale(.1);
}

.button__circle-1, 
.button__circle-2 {
  width: 8px;
}

.button__circle-1 {
  top: -8px;
  left: 58px;
  transform: scale(.1);
}

.button__circle-2 {
  right: 34px;
  bottom: -8px;
  transform: scale(.1);
}

.button__diamond {
  width: 18px;
  top: -18px;
  right: 62px;
  transform: scale(.1);
}

.button__triangle {
  width: 30px;
  left: 15px;
  bottom: -16px;
  transform: rotate(-48deg) scale(.1);
}

/* Gradient shadow */
.button__shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--gradient-color);
  padding: 1.25rem 3rem;
  border-radius: 4rem;
  border: 3px solid var(--black-color);
  z-index: -1;
  transition: transform .3s;
}

/* View shadow gradient */
.button:hover .button__shadow {
  transform: translate(-.5rem, .5rem);
}

/* Move reflection */
.button:hover .button__reflection-1 {
  left: 120%;
}

.button:hover .button__reflection-2 {
  left: -70%;
}

/* View geometric shapes */
.button:hover {
  transform: rotate(-4deg) scale(1.1);
}

.button:hover img {
  opacity: 1;
}

.button:hover .button__star-1 {
  transform: scale(1.1);
  transition-delay: .1s;
}

.button:hover .button__star-2 {
  transform: scale(1.1);
}

.button:hover .button__circle-1 {
  transform: translateY(-8px) scale(1.1);
  transition-delay: .1s;
}

.button:hover .button__circle-2 {
  transform: translate(-20px, 20px) scale(1.1);
}

.button:hover .button__diamond {
  transform: translateY(7px) rotate(-24deg) scale(1.1);
}

.button:hover .button__triangle {
  transform: rotate(-12deg) scale(1.1);
}

Magic Animation Button

Recommended

Neon button

button more

CSS Loading Animation with Fragment Effects

HTML

CSS

JS

Recommended

Neon button

button more

CSS Loading Animation with Fragment Effects

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS