Buttons are interactive elements that allow users to perform actions on your website or application. Buttons are commonly either rectangular or circular in shape and have a text label that says what will happen when you click on them.
While browsing web pages, you may have come across various interactive elements, such as submit buttons. In this article we will cover how to style buttons using CSS, explore different types of buttons, and discuss related properties.
Table of Contents
- How to Style a Button in CSS?
- CSS Buttons Colors
- CSS Button Borders
- CSS Rounded Buttons
- CSS Button Hover Effect
- CSS Button Focus and Active
- CSS Button Shadow Effect
- CSS Disabled Buttons
- CSS Buttons Widths
- CSS Buttons Groups
- CSS Vertical Buttons Groups
- CSS Buttons on Image
- CSS Animated Buttons
How to Style a Button in CSS?
- Setting the Dimensions: In CSS, height and width properties can be used to adjust size of buttons in a webpage.
- Define Color and Border: A UI compatible color and border with the right thickness make buttons stand out. The background-color and border property can be used to set color and border for any buttons in css.
- Shadow Effect: Adding a shadow effect around button using box-shadow property enhances button style.
- Hover Effect: Interactive styling like hover effect change the style of button when user hover the mouse over it. This can include changes in opacity, size (using transforms), etc.
- Animated Button: CSS animation can be used to create dynamic interactive buttons.
Setting Buttons Colors
As mentioned above we can use background-color property in CSS to give right color for buttons. Check out the example
Example
In this example we use style buttons with different colors that matches with UI of background color.
<!DOCTYPE html><html><head><style>body{ background: black; padding: 40px; } button { padding: 20px; margin-bottom: 10px; cursor: pointer; } </style></head><body><button style="background: #FFD700"> Yellow Button </button><button style="background: #00FFFF"> Blue Button </button><button style="background: #FFFFFF"> White Button </button><button style="background: #FF4500"> Orange Button </button><button style="background: #32CD32"> Lime Button </button></body></html></pre>Setting Button Borders
The border is space around the edge of a button. We can style a button border using border property.
The border property take three values thickness, type and color of border.
Example
Here is an example of how to create buttons with different border colors using
<!DOCTYPE html><html><head><style>button { font-size: 12px; padding: 10px; margin: 5px; background-color: #f0f0f0; } .style1 { border: 3px solid darkred; } .style2 { border: 3px solid gold; } .style3 { border: 3px solid black; } </style></head><body><button class="style1"> darkred border </button><button class="style2"> gold border </button><button class="style3"> black border </button></body></html></pre>Creating Rounded Buttons
We can create round cornered button or completely circular button using border-radius property.
/* Round cornered button */border-radius: 10px;/* Circular button */border-radius: 50%;Example
Here is an example of how to create rounded corner buttons.
<!DOCTYPE html><html><head><style></style></head><body><button class="style1">button { font-size: 12px; padding: 10px; margin: 5px; } .style1 { border-radius: 10px; background-color: violet; } .style2 { border-radius: 20px; background-color: pink; } .style3 { border-radius: 50%; background-color: violet; }Border-radius: 10px; </button><button class="style2"> Border-radius: 20px; </button><button class="style3"> Circle </button></body></html></pre>Button Hover Effect
Moving the mouse pointer above button without clicking on it is called hovering. We can style hover state of a button using :hover pseudo-class.
button:hover{property: value;}Example
Here is an example of creating button hover effect.
<!DOCTYPE html><html><head><style>button { font-size: 12px; padding: 10px; margin: 5px; background-color: #1156b3; /* Darker blue */ } .style1:hover { background-color: #0069d9; /* Slightly darker blue */} .style2:hover { transform: scale(1.2); /* Size increase effect */ } .style3:hover { background-color: lightblue; } </style></head><body><button class="style1"> Button 1 </button><button class="style2"> Button 2 </button><button class="style3"> Button 3 </button></body></html></pre>Button Focus and Active Styling
The focus state of a button is the state when the button is focused, typically after being clicked or tabbed into. The active state of a button is the state when the button is being clicked. We can style these states using the pseudo-class :focus. and :active
button:focus{property: value;}button:active{property: value;}Example
Here is an example focus state and active state of a button.
<!DOCTYPE html><html><head><style>.style-button { display: inline-block; padding: 15px; background-color: pink; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; } .style-button:hover { background-color: violet; } .style-button:focus { outline: none; box-shadow: 0 0 5px 2px blue; } .style-button:active { transform: translateY(2px); background-color: yellow; } </style></head><body><button class="style-button">Press Me</button></body></html></pre>Setting Shadow Effect on Button
In CSS, the box-shadow property used to add shadow effect around buttons.
A box shadow is described by horizontal and vertical offsets relative to the element, blur and spread radius, and color. Following is the syntax of box-shadow:
button{box-shadow: inset horizontal verticalblur-radius spread-color;}</pre>Example
Here is an example of how to create buttons with drop shadows.
<!DOCTYPE html><html><head><style>button { font-size: 12px; padding: 10px; margin: 5px; }.style1 { background-color: pink; box-shadow: 0 5px 10px 0 red; } .style2 { background-color: yellow; } .style3:hover { background-color: yellow; box-shadow: 0 5px 10px 0 orange; } </style></head><body><button class="style1"> Button 1 </button><button class="style2"> Button 2 </button><button class="style3"> Button 3 </button></body></html></pre>Disabled Buttons
A disabled button is a button that is not clickable. This button can be enabled using JavaScript when certain conditions are met.
We can create a disabled button by setting the cursor property to not-allowed.
Example
Here is an example.
<!DOCTYPE html><html><head><style>button { font-size: 12px; padding: 10px; margin: 5px; }.style1 { background-color: pink; cursor: pointer; } .style2 { background-color: yellow; opacity: 0.5; cursor: not-allowed; } </style></head><body><button class="style1"> Normal Button </button><button class="style2"> Disabled Button </button></body></html></pre>Setting Buttons Width
We can define horizontal width for button using width property.
Example
Here is an example of how to create buttons with different widths.
<!DOCTYPE html><html><head><style>button { font-size: 12px; padding: 10px; margin: 5px; }.style1 { background-color: pink; width: 200px; } .style2 { background-color: violet; width: 50%; } .style3 { background-color: yellow; width: 100%; } </style></head><body><button class="style1"> width 100px </button><br><button class="style2"> width 50% </button><br><button class="style3"> width 100% </button><br></body></html></pre>CSS Buttons Groups
Here is an example of how to create a horizontal button group by removing the margins and adding the float: left property to each button.
Example
<!DOCTYPE html><html><head><style>.button-group { display: flex; justify-content: center; float: left; } .style-button { background-color: yellow; border: none; padding: 10px 20px; float: left; text-align: center; text-decoration: none; font-size: 16px; } .style-button:hover { background-color: orange; } </style></head><body><div class="button-group"><button class="style-button">Submit</button><button class="style-button">Cancel</button><button class="style-button">Reset</button></div></body></html></pre>CSS Vertical Buttons Groups
Here is an example of how to create a vertical button group by setting display: block and float: left property
Example
<!DOCTYPE html><html><head><style>.button-group { justify-content: center; float: left; } .style-button { background-color: yellow; border: 2px solid orange; padding: 10px 20px; text-align: center; display: block; text-decoration: none; font-size: 16px; width: 100px; } .style-button:hover { background-color: violet; } </style></head><body><div class="button-group"><button class="style-button">Home</button><button class="style-button">Blog</button><button class="style-button">Setting</button></div></body></html></pre>CSS Buttons on Image
Here is an example of how to overlay a button on top of an image using relative positioning
Example
<!DOCTYPE html><html><head><style>.image-container { position: relative; display: inline-block; } img { width: 300px; height: 200px; } button { position: absolute; top: 40%; left: 30%; background-color: yellow; border: none; padding: 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; } button:hover { background-color: orange; } </style></head><body><div class="image-container"><img src="/css/images/tree.jpg" alt="Your Image"><button>Click Me</button></div></body></html></pre>CSS Animated Buttons
In, CSS we can use pseudo-elements to animate a button clicking effect.
Example
Here is an example of how to create animated effect on a button
<!DOCTYPE html><html><head><style>button { display: inline-block; padding: 15px; background-color: violet; border: none; text-align: center; text-decoration: none; font-size: 20px; cursor: pointer; position: relative; overflow: hidden; } button::before { content:""; position: absolute; width: 0; height: 100%; top: 0; left: 0; background-color: pink; transition: width 0.3s ease-in-out; } button:hover::before { width: 100%; } .icon::after { content: '\2192'; margin-left: 10px; } </style></head><body><button> Hover Me <span class="icon"></span></button></body></html></pre>