How to change button color in HTML?

CSS is used to provide styling in html elements. A hyperlink is a link which transfers you to one page to another page which works only by clicking the text or image. So, in this we will learn how we can change the color of a hyperlink text using CSS in HTML?
Submitted by Prerna Saxena, on October 07, 2017

HTML stands for Hypertext Markup Language and is used to structure the web whose tags are read by Web Browser’s and display the web page without showing the tags and show only the content with structure defined by tags.

We can set style of HTML elements using style attribute.

In this article, we are going to learn to change the button color using CSS, it can be done by two ways: 1) direct set the style properties on the tag, and 2) creating a CSS class and apply it on button

We can make a button in HTML using input type tag.

Syntax:

<input type="button" value="button_caption"/>

1) Defining button styles with the tag

<input type="button" style="background-color:black;color:white;width:150px;
height:40px;" value="Click Me!!">

2) Creating CSS class for it

.button_css
{
	background-color: black;
	color: white;
	width: 150px;
	height: 40px;
}

Applying on button:

<input type="button" class="button_css" value="Click Me!!">

HTML with the inline CSS

<html>
	<head>
		<title>Button Color Demo</title>
	</head>
	<body>
<input type="button" style="background-color:black;color:white;width:150px;height:40px;" value="Click Me!!">
	</body>
</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples