How:
The HTML code for this project is incredibly simple. From this view, it just looks like a regular button:
<button>
<div>
A beautiful button
</div>
</button>
Meanwhile, the css code is way more important to the design of the button. By using @property and keyframes, the button has a constantly shifting gradient moving behind it. This gives the feeling of a constantly rotating border color, but is actually the gradient doing the work.
to see what is going on in the background, change the transparency of the background color to 0%.
- Shown below is a rendition of the same code with different styling from the original project.
- View Demo