How to Change the Button Color in HTML

Accessorize your buttons with great color choices

Written by Travis Boylls

Last Updated: March 29, 2024

Want to set a custom color for your HTML buttons? If you don't want the usual gray buttons, you can easily make buttons different colors in both HTML and CSS (cascading style sheets). This wikiHow article will teach you how to change the color of the HTML buttons on your website.

Changing the Button Color in HTML

Using HTML type in the formula: <button style=“background-color: COLOR NAME;border-color:COLOR NAME;color:COLOR NAME”>Button Text</button> to change the button color.

Method 1

Method 1 of 2:

Using HTML

Download Article

This is the start of the button tag of your HTML code. The body of your HTML is the area in between <body> and </body> tags. The body is where the visible elements of a web page are placed using HTML.
This indicates that there are style elements to the button tag. All style elements will be placed after the "=" sign.

Advertisement
All style elements in your HTML button tag should be placed within quotation marks.
This element is used to change the background color of the button.^{[1]
X
Research source}
5
Type a color name or hexadecimal code after "background-color:". You can type name of a color (i.e, blue) or a hexadecimal color.^{[2]
X
Research source}
- To find a hexadecimal code, go to https://www.google.com/search?q=color+picker in a web browser. Use the slider bar at the bottom to pick a color. Use the circle in the window to select a color tint. Highlight and copy the 6-digit code (including the pound sign) in the sidebar to the left and paste it into your button tag.
- You can also use "transparent" as a background color^{[3]
  X
  Research source}
Type a semi-colon (;) after the background color. Use a semi-colon to separate the different style elements in the HTML button tag.
This element is used to determine the color of the border around the button. You can place style elements in any order in the quotation markers after "style=". Each element must be separated by a semi-colon (;).
8
Type a color name or hexidecimal code for the border color. The color name or hexidecimal code for the border goes after the "border-color:" element.
- If you wish to remove the border, type border:none in place of the "border-color:" element.
Use a semi-colon to separate the different style elements in the HTML button tag.
This element is used to change the text color in the button. You can place style elements in any order in the quotation markers after "style=". Each element must be separated by a semi-colon (;).
This goes after "color:" in the style element. This determines the color of the text in the button.
All your style elements should be in quotations marks after "style=" in the button tag. When you are finished adding all your style elements, type a quotation mark (") at the end to close the style elements.^{[4]
X
Research source}
This closes the opening button tag.
After you have finished creating the opening tag for your button, type the text you want to go in the button after the tag.^{[5]
X
Research source}
15
Type </button> after your button text. This is the closing tag for your button. Your button is complete. Your HTML code should look something like this.^{[6]
X
Research source}
```
<!DOCTYPE html>
<html>
 <body>
  <button style="background-color:red; border-color:blue; color:white">Button 
  Text</button>
 </body>
</html>
```

Method 2

Method 2 of 2:

Using CSS

Download Article

Type <head> at the top of your HTML document. This creates a head for your HTML document. The head of your document is where information that is not visible on your web page is placed. This includes meta data, the title of the page, and style sheets.
2
Type <style>. This tag add a location on your web page for cascading style sheets (CSS). This section goes in the head of your HTML document.
- Some HTML documents use an external style sheet. If this is the case, you will need to find the location of the external CSS file and edit the button style sheets on that document.
3
Type .button { on a separate line after the style section. This opens the style sheet for a button your are creating a style for. ^{[7]
X
Research source}
- You can also make the button color change when you place the mouse cursor over the button by creating a separate style sheet with .button:hover { as the opening tag.
. This goes on a separate line in the button style sheet. This element controls the background color of the button.
5
Type the name of a color or hexadecimal code followed by a semi-colon (;). Type this after the "background-color:" element in the button style sheet. This specifies the background color of the button.
- To find a hexadecimal code, go to https://www.google.com/search?q=color+picker in a web browser. Use the slider bar at the bottom to pick a color. Use the circle in the window to select a color tint. Highlight and copy the 6-digit code (With the pound sign) in the sidebar to the left.
- You can also type "transparent" as the background color to make the background invisible.
. The element controls the color of the border around the button. Type this on a separate line in the style sheet for the button.^{[8]
X
Research source}
7
Type the name of a color or hexadecimal code followed by a semi-colon (;). This determines the color of the border around the button. This goes after "border-color:" element in the button style sheet.
- If you wish to remove the border, type border:none; in place of the "border-color:colorname" element.
. Type this on a separate line in the style sheet. This element controls the color of the text in the button.^{[9]
X
Research source}
This determines the color of the text inside the button. This goes after "color:" element in the button style sheet.
This closes the style sheet for your button. You can create multiple button style sheets as long as you give each button a unique name.^{[10]
X
Research source}
After you finish creating all your style sheets, type "</style>" on a separate line to close the style section of your HTML document.
This closes the head of your HTML document.
13
Type <a href="url" class="button">button text</a> in the body of your HTML document. This adds a button to the visible part of your HTML using the style sheets specified in the Style section of your HTML document. Replace "url" with the web address the button links to. The body of your HTML document goes in between the <body> and </body> tags of your HTML document. You HTML code should look something like this:
```
<!DOCTYPE html>
<html> 
  <head>
    <style>
     .button {
      background-color:blue;
      border-color:red;
      color:white;
      }
    </style>
  </head>
   <body>
      <a href="https://www.wikihow.com" class="button">Home</a>
   </body>
</html>
```