How do i keep my button color in html?

Download Article

Nội dung chính Show

About This Article
Is this article up to date?
How do I give a button a color in HTML?
How do you keep color in HTML?
What is the default color of a button in HTML?
How can change button color after clicking?

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.

1

Type
2
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
3
Add a quotation mark (") after the equals (=) sign. All style elements in your HTML button tag should be placed within quotation marks.
4
Type background-color: in the quotation marks after "style=".This element is used to change the background color of the button.[1]
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]
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]
6
Type a semi-colon (;) after the background color. Use a semi-colon to separate the different style elements in the HTML button tag.
7
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 (;).
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.
9
Type a semi-colon (;) after the border color. Use a semi-colon to separate the different style elements in the HTML button tag.
10
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 (;).
11
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.
12
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]
13
Type > after the style elements. This closes the opening button tag.
14
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]
15
Type 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]
<html> <body> <button style="background-color:red; border-color:blue; color:white">Button Textbutton> body> html>

Advertisement

1

Type 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 after you finish your CSS. After you finish creating all your style sheets, type "" on a separate line to close the style section of your HTML document.
12
Type . This closes the head of your HTML document.
13
Type button text 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 and tags of your HTML document. You HTML code should look something like this:
<html> <head> <style> .button { background-color:blue; border-color:red; color:white; } style> head> <body> <a href="https://www.wikihow.com" class="button">Homea> body> html>

Advertisement

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Thanks for submitting a tip for review!

About This Article

Thanks to all authors for creating a page that has been read 321,698 times.

Is this article up to date?

How do I give a button a color in HTML?

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. Type a color name or hexadecimal code after "background-color:".

How do you keep color in HTML?

To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML tag, with the CSS property background-color. HTML5 do not support the tag bgcolor attribute, so the CSS style is used to add background color.

What is the default color of a button in HTML?

By default, a button has a white background and black text. Using the CSS background-color property, we can change a button's background color.

How can change button color after clicking?

To change a button's color onClick:.

Add a click event listener to the button..

Each time the button is clicked, set its style. backgroundColor property to a new value..

Optionally set its style. color property..

How do i keep my button color in html?

About This Article

Is this article up to date?

How do I give a button a color in HTML?

How do you keep color in HTML?

What is the default color of a button in HTML?

How can change button color after clicking?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội