Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Style input type button with CSS
The input type button can be a submit button or reset button. With CSS, we can style any button on a web page to enhance its appearance and user experience.
Syntax
input[type=button] {
property: value;
}
Example 1: Basic Button Styling
The following example demonstrates how to style an input type button with background color, padding, and hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
input[type=button] {
background-color: #ff6600;
border: none;
color: white;
padding: 12px 24px;
margin: 10px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s;
}
input[type=button]:hover {
background-color: #e55a00;
}
</style>
</head>
<body>
<p>Fill the below form:</p>
<form>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="sub"><br><br>
<label for="student">Student:</label>
<input type="text" id="student" name="stu"><br><br>
<input type="button" value="Submit Form">
</form>
</body>
</html>
A form with two text input fields and an orange styled button with rounded corners appears. The button changes to a darker orange shade when hovered over.
Example 2: Multiple Button Styles
You can create different button styles using CSS classes −
<!DOCTYPE html>
<html>
<head>
<style>
.btn-primary {
background-color: #007bff;
color: white;
border: 2px solid #007bff;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
}
.btn-secondary {
background-color: transparent;
color: #6c757d;
border: 2px solid #6c757d;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.btn-danger {
background-color: #dc3545;
color: white;
border: none;
padding: 15px 30px;
border-radius: 0;
cursor: pointer;
text-transform: uppercase;
}
</style>
</head>
<body>
<input type="button" class="btn-primary" value="Primary Button"><br><br>
<input type="button" class="btn-secondary" value="Secondary Button"><br><br>
<input type="button" class="btn-danger" value="Danger Button">
</body>
</html>
Three differently styled buttons appear: a blue rounded button, a gray outlined button, and a red rectangular button with uppercase text.
Conclusion
CSS provides extensive styling options for input type buttons. You can customize colors, borders, padding, hover effects, and transitions to create visually appealing and interactive buttons that match your website's design.
Updated on: 2026-03-15T12:44:24+05:30
5K+ Views
Advertisements