Creating Beautiful Buttons Using CSS❤💯🆒
How do you design your HTML buttons using CSS? How do you make your buttons look more Beautiful and Professional in your website✨?
Here is a little insight on that📌.
Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We’ll also address usability.
Links Vs. Buttons
Before we explain how to style buttons, let’s clear up a common misconception: buttons are not links.
The main purpose of a link is to navigate between pages and views, whereas buttons allow you to perform an action (such as submit a form).
Styling HTML Buttons Using CSS
CSS BUTTONS — COLORS
We can use the color CSS property to change the color of the text inside the button.
To change the background color of a button, we can use the bacground-color CSS property.
Here is an example:
.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 */
CSS BUTTONS — FONT SIZE
To increase the font-size of a button we need to use the font-size property.
Example:
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
CSS BUTTONS — PADDING
To increase the padding of a button we need to use the padding CSS property.
Example:
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
CSS BUTTONS - ROUNDED CORNERS
We can use the border-radius CSS property to make buttons with rounded corners.
Example:
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
CSS BUTTONS — TRANSPARENT BACKGROUND WITH BORDERS
It may be a good idea to remove the background of a button and have colorful text borders.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}.button4 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
</style>
</head>
<body><h2>Colored Button Borders</h2>
<p>Use the border property to add a border to the button:</p><button class=”button button1">Green</button>
<button class=”button button2">Blue</button>
<button class=”button button3">Red</button>
<button class=”button button4">Gray</button>
<button class=”button button5">Black</button></body>
</html>
CSS BUTTONS — MOUSE OVER EFFECTS
We can use the :hover selector to add an effect when we move the mouse over a button.
Then we need to use the transition-duration property to specify the duration of the effect.
Also, to change the icon of the cursor during the effect, use the cursor CSS property.
CSS BUTTONS — BOX SHADOWS
To make a button more beautiful we can add box shadows. We can achieve this by using the box-shadow CSS property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body><h2>Shadow Buttons</h2>
<p>Use the box-shadow property to add shadows to the button:</p><button class=”button button1">Shadow Button</button>
<button class=”button button2">Shadow on Hover</button></body>
</html>
CSS BUTTON — DISABLED
To make a button disabled in CSS we need to set the cursor CSS property to not-allowed.
Use the opacity CSS property to make the button look like disabled.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}.disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body><h2>Disabled Buttons</h2>
<p>Use the opacity property to add some transparency to the button (make it look disabled):</p><button class=”button”>Normal Button</button>
<button class=”button disabled”>Disabled Button</button></body>
</html>
IN CONCLUSION
There are so many other ways to style your buttons using CSS to make them look more beautiful. We have:
- CSS Width: You can increase and decrease the width of your button using the CSS Width attribute.
- Button With An Image: You can also add a button inside an image.
- You can also change the text-color, add text shadows, animations and many more.
To know more about CSS buttons, you can check out w3school and freecodecamp.
If you have more ideas on how to design html buttons, feel free to share them✨.
