Webleb - fragmentos de código - Botón de animación mágica

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);
}

Botón de animación mágica

Recomendado

Un código de Mete

Plantilla de página de destino de sitio web

Sitio web del planificador de citas

HTML

CSS

JS

Recomendado

Un código de Mete

Plantilla de página de destino de sitio web

Sitio web del planificador de citas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS