Download Article
Accessorize your buttons with great color choices
Download Article
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 .
Steps
-
Type <button in the body of you HTML. 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.
-
Type style= after "button" in your button tag. This indicates that there are style elements to the button tag. All style elements will be placed after the "=" sign.Advertisement
-
Add a quotation mark (") after the equals (=) sign. All style elements in your HTML button tag should be placed within quotation marks.
-
Type background-color: in the quotation marks after "style=". This element is used to change the background color of the button. [1] X Research source
-
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.
-
Type border-color: in the quotation marks after "style=". 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 (;).
-
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.
-
Type a semi-colon (;) after the border color. Use a semi-colon to separate the different style elements in the HTML button tag.
-
Type color: in the quotation marks after "style=". 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 (;).
-
Type the name of a color or hexadecimal code. This goes after "color:" in the style element. This determines the color of the text in the button.
-
Type a quotation mark (") after all your style elements. 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
-
Type > after the style elements. This closes the opening button tag.
-
Type your button text after the 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
-
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 >
Advertisement
-
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.
-
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.
-
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.
-
Type background-color: . This goes on a separate line in the button style sheet. This element controls the background color of the button.
-
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.
-
Type border-color: . 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
-
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 color: . 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
-
Type the name of a color or hexadecimal code followed by a semi-colon (;). This determines the color of the text inside the button. This goes after "color:" element in the button style sheet.
-
Type } on a separate line. 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
-
Type </style> after you finish your CSS. After you finish creating all your style sheets, type "</style>" on a separate line to close the style section of your HTML document.
-
Type </head> . This closes the head of your HTML document.
-
in the body of your HTML document." src="https://www.wikihow.com/images/thumb/8/8b/11147764-28.jpg/v4-460px-11147764-28.jpg" decoding="async" class="f3cf91be500f82cf2fabff0d2a44ce9d whcdn content-fill p_maxWidth" data-srclarge="/images/thumb/8/8b/11147764-28.jpg/aid11147764-v4-728px-11147764-28.jpg" data-width="280" data-height="344" id="f3cf91be500f82cf2fabff0d2a44ce9d"/>
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-28.jpg\/v4-460px-11147764-28.jpg","bigUrl":"\/images\/thumb\/8\/8b\/11147764-28.jpg\/aid11147764-v4-728px-11147764-28.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}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 >
Advertisement
Expert Q&A
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
Video
Tips
Submit a Tip
All tip submissions are carefully reviewed before being published
Thanks for submitting a tip for review!
References
- ↑ https://www.youtube.com/watch?v=_2wARy-oevQ
- ↑ https://www.youtube.com/watch?v=_2wARy-oevQ
- ↑ https://www.randombio.com/linuxsetup94.html
- ↑ https://www.youtube.com/watch?v=_2wARy-oevQ
- ↑ https://www.youtube.com/watch?v=_2wARy-oevQ
- ↑ https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/
- ↑ https://help.surveygizmo.com/help/change-color-of-next-submit-and-progress-bars
- ↑ https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/
- ↑ https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/
About This Article
Thanks to all authors for creating a page that has been read 516,241 times.
Advertisement
