How to create a Submit Button in the Form with the Hover Effect
By Saurabh SinghIn this tutorial, we will learn how to create a Submit button inside a form. Buttons are mostly used for something posting, submitting or uploading. We can use this code to apply it to any type form, you just have to modify its value and the code is ready to be applied in any form.
Create a submit button in the form with hover effect
Here I’m providing the code to get the submit button for your HTML page. Note:
Note: You can change its value to anything else, as per your need or according to your type of HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
.loginbox input[type="submit"]{
border: none;
outline:none;
height:40px;
width: 150px;
background:#fb2525;
color: #fff;
font-size:18px;
border-radius:20px;
}
.loginbox input[type="submit"]:hover{
cursor:pointer;
background:#ffc107;
color:#000;
}
.active{
color:#fff;
background:#e02626;
border-radius:4px;
}
</style>
</head>
<body>
<div class="loginbox">
<form>
<input type="submit" name="" value="Submit">
</form>
</div>
</body>
</html>
Basically, the role of the button is to identify the elements as a button to screen reader. A button is used to do an action like submitting a form, opening a dialogue, canceling the action, or performing a command. In easy words displaying information in short or with the help of one word.
As you can see above I have created a div class in the body.
<body>
<div class="loginbox"> </div>
</body>We can identify the div by its class name loginbox.
Inside this div class, there is the form tag inside that tag we are writing the code of getting the button. And you can change its value to anything. Basically by changing the value to other than text will appear on your button, when you will execute this code.
Also learn,
Leave a Reply