Close

Message card with animated button

This is an example of a message card with an animated button, designed using HTML, CSS, and Bootstrap framework 4. The badge of the card is imported to the code with its URL. The form is given a background color as #eee, whereas the background color of the card is set as primary, in HTML. The message card is given a width of 350px. The Total text line is displayed with the styles of font color as #d0c9c9, font-size as 13px, and margin-top as 6px. The 'Fix it now' button is given the styles of margin-top as 30px, margin-bottom as 30px, width as 150px, background as #28a745, color as #fff, and transition as all 0.5s. In a hover event, the button changes its background color to #1e7e34, font color to #fff, and takes a transform effect of scale(1.1) to change the scale of the button to create the animation. Source: https://bbbootstrap.com/snippets/bootstrap-card-animated-button-33448129

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.