Close

Responsive Buttons

This is an example of a web layout with responsive buttons with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The fonts are imported to the code with their URLs. The body of the form is given a background color of #1D1F20. There are four buttons in the form named as Settings, Random, Download, and Messages. The buttons are given the styles of background as linear-gradient(to right, #2a2d35 0%, #353742 100%), border-color as #404454 white black red, border-style as solid, border-width as 2px 0px 2px 0px, color as #00FFAD, font-size as 35px, height as 76px, line-height as 76px, text-align as center, text-shadow as 0px -2px 1px #23252B, 0px 2px 2px #23252B, 0px 0px 20px #049B6A, width as 80px, and cursor style as pointer to get the hand cursor effect in a hover event. The button names have the styles of cursor as pointer, font-family as hipster, font-size as 25px, height as 76px, line-height as 76px, and margin-top as -76px. In a hover event, the buttons take the styles of background as linear-gradient(to right, #393c47 0%, #4a4e5b 100%), color as #FFD5A0, font-size as 45px, and text-shadow as 0px 0px 20px #FF8E00, 0px 2px 0px #23252B, 0px -1px 0px #23252B. Source: https://codepen.io/Trinca/pen/rLqNXv

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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