.button {
  cursor: pointer;
  border: none;
  background: #7808d0;
  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;
}

.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: #7808d0;
  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;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Spinning Text Circular Button Animation Using HTML & CSS

If you’re looking to create a truly eye-catching and interactive button for your website, this spinning text circular button is an excellent example of how modern CSS animations can bring designs to life — no JavaScript required.

In this post, we’ll break down how this unique rotating button works and how you can use it to enhance your user interface.

What Makes This Button Special?

This button is more than just clickable—it’s animated, visually engaging, and built for interactivity:

The text spins continuously in a circular path.
On hover, the button scales up and changes background color.
It features a dual icon switch animation that swaps one icon for another using smooth transitions.

All of this is achieved using pure HTML and CSS, making it lightweight, responsive, and easy to customize.

How the Animation Works

1. Circular Button Design

The button is styled to be a perfect circle using border-radius: 50%, with a fixed height and width.

It uses a bold color (#7808d0) and white text.
The display: grid and place-content: center ensure the content is perfectly centered.

2. Rotating Text

The text inside the button is broken into individual <span> elements, each with a custom --index value. These are absolutely positioned and rotated by calc(19deg * index).

This setup creates a circular arrangement of letters.

The entire text container is then animated with @keyframes text-rotation to rotate 360 degrees infinitely.

3. Icon Transition

The button contains two SVG icons stacked inside a small white circle (.button__circle):

Default icon: Initially visible in the center.
Copy icon: Positioned off-screen.

When the user hovers over the button:

The first icon slides out (translate(150%, -150%)).
The second icon slides in (translate(0)), giving a smooth icon-swap effect.

This is done with staggered transitions for a polished look.

4. Hover Interaction

When hovered:

The button scales up slightly for emphasis.
The background changes from purple to black.
Icon color adjusts for visibility.
The spinning text remains in motion, providing a dynamic feel throughout.

Why Use This Type of Button?

This animated circular button is ideal for modern, tech-forward designs. It adds personality and movement to your website without the need for heavy frameworks.

Great use cases include:

Call-to-action buttons like “Subscribe”, “Copy”, or “Join”
Feature on landing pages or hero sections
Portfolio websites or creative agencies
Buttons for apps or product promotions

Built with Accessibility and Performance in Mind

Because it uses semantic HTML and scalable SVG icons, this button remains accessible and responsive across devices. Plus, with no JavaScript involved, it’s fast-loading and easy to integrate into any layout.

Final Thoughts

If you want your buttons to stand out from the crowd, this rotating text circular button is a brilliant choice. It showcases how far you can push CSS to build sophisticated UI components that feel smooth and professional.

You can easily customize:

The button size and color
The text and font
The icon and its animations

Whether you’re creating a personal website, a startup landing page, or a web app interface, this CSS-powered button can add a memorable visual touch.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.