Webleb - Extraits de Code - Bouton d'animation magique

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

Bouton d'animation magique

Recommandé

Ajouter un bouton pour ouvrir l'ajout de données de profil avec validation

Bouton Supprimer

Bouton néon

HTML

CSS

JS

Recommandé

Ajouter un bouton pour ouvrir l'ajout de données de profil avec validation

Bouton Supprimer

Bouton néon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS