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

Animación de burbuja de pensamiento CSS

Arte CSS de Office

Formulario de inicio de sesión simple

HTML

CSS

JS

Recomendado

Animación de burbuja de pensamiento CSS

Arte CSS de Office

Formulario de inicio de sesión simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS