Magic animation button - Bedimcode

About Magic animation button - Bedimcode

Magic animation button - Bedimcode is an animated CSS button by @Nishusk. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Hover effects, Icon, Download

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!--=============== REMIXICONS ===============-->
      <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">

      <!--=============== CSS ===============-->
      <link rel="stylesheet" href="assets/css/styles.css">

      <title>Magic animation button - Bedimcode</title>
   </head>
   <body>
      <div class="container">
         <a href="#" class="button">
            <div class="button__content">
               <span class="button__text">Download</span>
               <i class="ri-download-cloud-fill button__icon"></i>

               <div class="button__reflection-1"></div>
               <div class="button__reflection-2"></div>
            </div>

            <img src="https://th.bing.com/th/id/R.6b0bb474b2b815477d9f421a747d1549?rik=io9hlaf5%2bD7CiA&riu=http%3a%2f%2fwww.clipartbest.com%2fcliparts%2fbiy%2f6Xx%2fbiy6Xxn5T.png&ehk=CmoDE5bqivVo4TOIjoEyCTFYRcvhXACviNBBfUgwe7g%3d&risl=&pid=ImgRaw&r=0" alt="" class="button__star-1">
            <img src="https://th.bing.com/th/id/R.6b0bb474b2b815477d9f421a747d1549?rik=io9hlaf5%2bD7CiA&riu=http%3a%2f%2fwww.clipartbest.com%2fcliparts%2fbiy%2f6Xx%2fbiy6Xxn5T.png&ehk=CmoDE5bqivVo4TOIjoEyCTFYRcvhXACviNBBfUgwe7g%3d&risl=&pid=ImgRaw&r=0" alt="" class="button__star-2">
            <img src="https://th.bing.com/th/id/R.6f89168fa84af6349fc99332b0b4ce66?rik=AvRkf%2baedw6A%2bA&riu=http%3a%2f%2fclipart-library.com%2fimages_k%2fblack-circle-transparent%2fblack-circle-transparent-10.jpg&ehk=p7War3DYsBz6hIofhACpEy9uv%2fNgXexY6MLNgxH%2bizU%3d&risl=&pid=ImgRaw&r=0" alt="" class="button__circle-1">
            <img src="https://th.bing.com/th/id/R.6f89168fa84af6349fc99332b0b4ce66?rik=AvRkf%2baedw6A%2bA&riu=http%3a%2f%2fclipart-library.com%2fimages_k%2fblack-circle-transparent%2fblack-circle-transparent-10.jpg&ehk=p7War3DYsBz6hIofhACpEy9uv%2fNgXexY6MLNgxH%2bizU%3d&risl=&pid=ImgRaw&r=0" alt="" class="button__circle-2"> 
            <img src="https://images.vexels.com/media/users/3/139261/isolated/preview/e81900b82cb04c2f11cff7427def25fa-rhombus-shape-by-vexels.png" alt="" class="button__diamond">
            <img src="https://th.bing.com/th/id/R.2514f7ea57820f9c02205487c75aeb71?rik=fl6imGvgo0PNvw&riu=http%3a%2f%2ffreevector.co%2fwp-content%2fuploads%2f2011%2f05%2f62601-plain-triangle.png&ehk=%2bMgU4eo7%2fRDuCkOb9%2bAlNk9UXl8CeIkqQExzo0KGwqc%3d&risl=&pid=ImgRaw&r=0" alt="" class="button__triangle">
            
            <div class="button__shadow"></div>
         </a>
      </div>
   </body>
</html>

/*=============== 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;
}

.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: 25px;
  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);
}

// Add Your button script here