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.