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

अनुशंसित

1 October 2023

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

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

अनुशंसित

ग्लोइंग टेक्स्ट इफेक्ट

UNO कार्ड HTML CSS उदाहरण

सीएसएस ग्रेडिएंट बटन

HTML

CSS

JS

अनुशंसित

ग्लोइंग टेक्स्ट इफेक्ट

UNO कार्ड HTML CSS उदाहरण

सीएसएस ग्रेडिएंट बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS