View Categories

CSS Buttons

2 min read

Learn how to style buttons using CSS.

Basic Button Styling #

.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Button Colors #

Change the background color of a button with the background-color property:

Use the background-color property to change the background color of a button:

.button1 {background-color: #4CAF50;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */

Button Sizes #

Change the font size of a button with the font-size property:

Use the padding property to change the padding of a button:

Powered by BetterDocs

Leave a Reply