Close

Pricing Table with Hover Effects

This is another example of a pricing table with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The Bootstrap styles package has been imported to the code with its URL. The form consists of four 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 header section of the cards is given the styles of font-weight as 300, font color as #fafafa, font-size as 27px, background as #36d7ac, and border-bottom as solid 1px #41b91c. The price section is given the styles of font color as #bac39f, font-size as 54px, font-weight as 300, background color as #fbfef2, and border-bottom as solid 1px #f5f9e7. In the active and hover modes, the font color of the pricing section turns to #36d7ac. In a hover event, the cards take the border style of 3px solid #36d7ac. The 'Signup' button is given a background color of #f3c200, which gets changed to #cfa500, on hover. Source: https://bootsnipp.com/snippets/90QO4

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.