Back to buttons

Live preview

Preview settings

Changes appear as you type. Use Tab to test keyboard focus.

⌘ / Ctrl + S saves locally

r7chardgh's hover button

HTML, CSS or Tailwind, and a little JavaScript. One button or a group of up to six.

By r7chardgh

Remix button

Button submission checks

Checks will appear after the preview updates.

Buttons only: no full pages, forms, cards or navigation. Put scripts in the JavaScript tab. Tailwind uses utilities from HTML and JavaScript; use complete class names. Custom CSS supports plain CSS, without @apply, imports or plugins.

Accessibility quick check

Waiting for the rendered preview…

Try Tab, Enter and Space in the preview. Check the focus ring, hover and disabled states, then enable Reduce motion. These checks are guidance, not an accessibility certification.

Explore freely here. Remix to publish your version with credit to the creator.

About r7chardgh's hover button

r7chardgh's hover button is an animated CSS button by r7chardgh. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories
Hover effects, Icon
Using this example
Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

Read the source files

HTML

<button class="button">
  Button
  <svg class="stars" viewBox="0 0 353 178" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M271 37.9914C289.244 33.3118 295.91 27.0769 299.991 9C305.137 29.7552 312.313 36.1206 331.104 40.1127C312.194 43.8462 305.081 49.4282 302.113 69.1041C296.925 50.845 289.057 44.9589 271 37.9914Z"></path>
<path d="M254.852 83.012C245.919 73.8857 239.998 72.0853 228 75.817C238.443 65.759 239.748 59.3874 235.721 47C244.325 56.8385 250.014 59.1225 262.574 54.195C253.611 63.4315 252.822 70.0469 254.852 83.012Z"></path>
<path d="M275.626 97.3875C278.179 88.2512 277.138 83.7734 270.281 77.4407C280.63 80.423 285.214 78.8959 291.687 71.7049C288.553 80.8937 289.197 85.4019 297.032 91.6517C287.761 89.3164 283.212 91.2658 275.626 97.3875Z"></path>
</svg>

</button>

CSS


.stars {
  position: absolute;
  opacity: 0;
  top: -.3em;
  right: -.3em;
  height: 100%;
  transition: transform 300ms,opacity 150ms;
}

.stars :nth-child(n) {
  fill: #999;
}

.button {
  position: relative;
  cursor: pointer;
  padding: 1em 2em;
  border: 0;
  border-radius: .5em;
  font-weight: bolder;
  transition: transform 150ms, box-shadow 150ms;
  box-shadow: 0 0 #999;
  background-color: #f1f1f1;
  color: #333;
}

.button:hover {
  transform: translate(.3em,-.3em);
  box-shadow: -.3em .3em #999;
}

.button:hover > .stars {
  opacity: 1;
  transform: translate(.2em,-.2em);
}

.button:active > .stars :nth-child(n) {
  fill: #ccc;
}