Style a clicked button in CSS

The “:active” pseudo-class changes the button color on click in CSS. Specifically, it can display the button element when it gets executed. You can set different button colors using this class when the mouse clicks on it. At first, the button color is set to yellow. On mouse hover, the button background color is changed to orange. When we click the button, the color is changed to red. 

The background-color property is used to change a button's background color. We can use the font-size property to change the font size of a button. The padding property is used to change the padding of a button. To add a rounded corner button, use the border-radius property. We can also use the border property to add colors to the border of a button. When the mouse over it, use the: hover selector to change the style of a button. To declare the speed of the "hover" effect, use the transition-duration property. We can also add shadows to a button by using the box-shadow property. To create a "disabled" look, use the opacity property to add transparency to a button. When you mouse over the button, you can add the cursor property with a value of "not-allowed", which displays a "no parking sign".: 

The hover and click buttons are created using the HTML code of the button tag. The br tag breaks the sentence or places an element on the next line. 

Here is an example of how to style a clicked button in CSS: 

Preview of the output that you will get on running this code from your IDE.

Code

Instructions

Follow the steps carefully to get the output easily.

1. Download and Install VS Code on your Desktop.
2. Open the VS Code and install Live Server from Extensions.
3. Open the new file and save it as filename.html.
4. Copy the code using the "Copy" button above, and paste it into your HTML file( Paste CSS code within the style tag ).
5. Click the Go live button in the bottom right corner to get the output.

I hope you found this useful. I have added version information in the following sections.

I found this code snippet by searching for ' Styling button using HTML and CSS ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

1. The solution is created in VS Code 1.73.1 version.
2. Live Server v5.7.9

Using this solution, we are able to style a clicked button in CSS with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to style a clicked button in CSS.

Support

1. For any support on kandi solution kits, please use the chat
2. For further learning resources, visit the Open Weaver Community learning page