How To Change Submit Button Color In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you how to change submit button color in HTML, a button in HTML is generally used to login, as if we want to go another page and in forms also to submit data. So, in result we can say that in HTML a button is used as a link to submit data or to another website.
Sometimes, we want our button to be more creative and colorful, by changing its height, width, corners and colors, etc.
Here, in this tutorial today we understand that how we are able to change the color of a button, whether it is used in form or any other tag in HTML body.
Step By Step Guide On How To Change Submit Button Color In HTML :-
As we know, button is made or created in HTML by two ways - by using button tag and by using input tag.
Here, to change the color of a button the concept behind both tags are same. For this the easiest way is to use CSS. So, you can use class and also give style in these tag.
In above line, we want to say that you can apply inline CSS, internal CSS and external CSS also. Now, below we show to how to change color the color of button by using both tag and internal CSS.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
.button_t{
background-color: aqua;
color: blue;
}
.input_b{
background-color: darkgray;
color: black;
}
</style>
</head>
<body>
<button type="submit" class="button_t">
click me !
</button>
<input type="button" value="click here! " class="input_b">
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively and as specified before closing head tag we have to create style tags in head. The content between head is specified in next column.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, in body here we create two button tags and we use button and input tags to create button.
- Here, we use two buttons, so that you understand that the way is same to change color to all button tags types.
- Now, we specify two different classes to both tags and in style attribute of head and in their classes we give background colors and text colors to change the button color.
- These buttons are known as submit button because, we give their value as submit in value attribute.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, after reading this article we come into point that a submit button is that in which the value written is submit whether the tag used is any and we can change color of any button by applying background color and text color attributes.
I hope this tutorial on how to change submit button color in HTML helps you.
About Amruta
