Search code examples
htmlcssmaterial-designbootstrap-material-design

Animate Material design click animation on <input type="submit">

I need to create a button that simulates the behaviour of some of these: https://fezvrasta.github.io/bootstrap-material-design/#button

But instead of the <button> tag, the <input type="submit"> tag. However, this one doesn't have any :before or :after elements. How would I go about implementing that?

Solution

  • You're right, there are no pseudo elements like :before and :after available for <input type="submit" />. Why is <button type="submit"> not ok for you?

    The only way I could think of at the moment is using Javascript. If the button is clicked you can create a new element, append the same size of the button and position it on top of it. The insert the same text as the input tag has. In this newly created element you can put the circle thing and animate it. As soon as the animation stops you can remove it from the DOM again. I hope you get what I mean.

    This sounds like too much work for such a small thing to achieve.

    // Edit: If you want to try my suggestion, you need to make sure, that inside the new element the copied text is above the bubble/circle animation thing.