एनिमेटेड टेक्स्ट और आइकन के साथ स्टाइलिश CSS बटन

1152 alejandrokundrah

संपादक में खोलें Video अपना कोड प्रकाशित करें

एनिमेटेड टेक्स्ट और आइकन के साथ स्टाइलिश CSS बटन

अनुशंसित

23 August 2025

कप्पाडोसिया पैरालैक्स इवनिंग HTML/CSS

23 August 2025

वेब डिज़ाइन, डिजिटल अनुभव और पॉडकास्ट HTML टेम्पलेट

9 December 2025

HTML CSS लॉगिन फ़ॉर्म टेम्पलेट Deezer Aesthetic

HTML

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

अनुशंसित

कप्पाडोसिया पैरालैक्स इवनिंग HTML/CSS

वेब डिज़ाइन, डिजिटल अनुभव और पॉडकास्ट HTML टेम्पलेट

HTML CSS लॉगिन फ़ॉर्म टेम्पलेट Deezer Aesthetic

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS