• Stars
    star
    121
  • Rank 293,924 (Top 6 %)
  • Language SCSS
  • Created about 7 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CSS Animations that make buttons morph into forms

Morpherings

CSS3 Animations that causes buttons to morph into forms. A few lines of javascript is used for triggering. This is mostly a personal project I made for fun, but I can imagine it being useful in some situations. For example if you don't want to redirect the user to another page to sign up. Depending on your website layout it could be a bit too verbose to have a extensive form in the middle of the webiste, with these animations the form appears only when you want it to. Which allows you to have a less cluttered page. A smooth animation is quicker than loading a new page.

Accessibility

Having accessible forms is important. Therefore, I have done my best to make the forms accessible. Animation1 has been tested with JAWS, and seems to be working perfectly fine, however I am quite inexperienced with using screen readers so it might not be perfect! You may want to test it out yourself. Animation2 has aria tags(credits to scottaohara for helping with this) and should be quite accessible, although not perfect.

GIFs

Animation 1

Animation 2

More Repositories