Bouton CSS élégant avec texte animé et icône

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 December 2025

Affichage de la grille CSS de la matrice Hadamard

23 November 2025

CSS

.button {
  cursor: pointer;
  border: none;
  background: #111111;
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  transition:
    background 300ms,
    transform 200ms;
  font-weight: 600;
}

body{
  Display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.button__text {
  position: absolute;
  inset: 0;
  animation: text-rotation 8s linear infinite;

> span {
    position: absolute;
    transform: rotate(calc(19deg * var(--index)));
    inset: 7px;
  }
}

.button__circle {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #fff;
  color: #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button__icon--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button:hover {
  background: #000;
  transform: scale(1.05);
}

.button:hover .button__icon {
  color: #000;
}

.button:hover .button__icon:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.button:hover .button__icon--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}

Bouton CSS élégant avec texte animé et icône

Recommandé

Affichage de la grille CSS de la matrice Hadamard

Metehan

Boutique de jetons Discord

HTML

CSS

JS

Recommandé

Affichage de la grille CSS de la matrice Hadamard

Metehan

Boutique de jetons Discord

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS