Home » HTML and CSS

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="backgroundcolor:black;color:white;width:150px;
height:40px;" value="Click Me!!">

2) Creating CSS class for it

.button_css
{
	backgroundcolor: 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="backgroundcolor:black;color:white;width:150px;height:40px;" value="Click Me!!">
	</body>
</html>

Output

button CSS in HTML output





Was this page helpful? YES NO

Are you a blogger? Join our Blogging forum.



Comments and Discussions





© https://www.includehelp.com (2015-2018), Some rights reserved.




Like other websites, this site uses cookies to deliver relevant ads based on your interest, by using our website, you acknowledge that you have read our privacy policy.
Close