Close

Pricing Table with Hover Effects

This is an example of another pricing table with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap styles package has been imported to the code with its URL. The form consists of two price cards. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the price card details, in an orderly manner. The price card header section is given a background color of #4d4d4d, which gets changed to #09b2c6 in a hover event. The title of each card is displayed with a font-size of 20px, and given a text-transform style as uppercase to automatically convert the text to uppercase. The price value is displayed with a font-size of 55px, and font color of #09b1c5. In a hover event, the font color of the price value gets changed to #fff. The 'Signup' button is given a background color as #d9d9d8 and gets changed to #09b1c5 on hover. Media quarries have been used to increase the responsiveness of the form. Source: https://bootsnipp.com/snippets/B2KdQ

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.