How to Create Colored Buttons in HTML (Cool & Attractive)

Steps on how to make colorful buttons in HTML that are cool and attractive

Button is one of the elements in HTML that you may often encounter on a website. Usually this element is used on submit forms or others. Button is commonly referred to as a button. So that the website you build looks more attractive, then you have to pay attention to the small things that can support the beauty of your website, one of which is the button.

How to Create Colored Buttons in HTML

There are several ways to create colored buttons in HTML, but actually the point is the same, namely they both use CSS, only the properties are different so that the button looks more attractive. Immediately, here are some ways that you can use to create colored buttons in HTML.

1. The First Way

Creating buttons or colored buttons in HTML is very easy. You just need to use CSS. You can use separate CSS tags or you can combine them with tags

You can see in the script or code above, to make the color on the button you just add the background-color attribute followed by the color you want and of course by adding the style tag in it. This method includes the simplest way, because it only creates a colored button without adding other attributes.

The image below is the result of the display of the script or code above.

This first method is suitable for those of you who just really want to change the color. Good luck!

2. Second Way

The second way that you can use to create colored buttons or buttons in HTML is to keep using CSS but by adding other properties that can make your buttons look more attractive. The following is an example of a script or CSS code that you can add to make your button more beautiful.

The explanation of the script or code above is:

• .btn2 is a class selector that will select HTML tags that have class btn2, if there is an HTML tag that has that class it will be selected.
• background-color is used to set the color of the HTML button
• border is used to create a border or border on the button. You can add this border such as border-top, border-left, border-bottom, and also border-right. Just adjust it to your liking.
• color is used to give color to the text on the button
• padding is used to set the distance between the content and the border. For example 15 px 32 px, that means the top and bottom distance is 15 px, while the right and left distance is 32 px.
• text-align is used to adjust the position of the text or content in the button
• text-decoration is used to set the decoration on the text in the button
• display
• font-size is used to set the size of the text in the button
• margin is used to set the distance on the outside between elements. Example on script margin: 4px 2px; meaning that the top and bottom outer edges are each 4px apart, while the right and left outer edges are 2px each.
• cursor is used to define the type of cursor (Pointer Mouse) that you want to change, so when your cursor points to the button, the cursor will change according to what you have specified.
• btn2:hover will give a hover effect (when the mouse is on the element). In this example the button will give the effect of opacity of 0.9.

After you enter the script, don’t forget to enter your button tag class=”btn2″. Like the script below.

The image below is the result of the script above. Good luck!

3. Third Way

There is no very noticeable difference compared to the previous methods. The difference is only in the property section. If you want to add a shadow or shadow to the button, you can also use CSS. The following is a script or CSS code that you can use.

Explanation:

• box-shadow is used to create a shadow or shadow on the button
• .btn_style:hover{border} will give a hover effect in the form of a border when you hover your mouse over the button, as well as box-shadow which will give a slightly larger shadow effect when you hover your mouse over the button.

Don’t forget, in the tag section