How to create button using HTML and CSS?
In this article we are learning how to create button using HTML, CSS and how do you make a button clickable in HTML CSS?
What is button in website?
Buttons play important role in any website. It helps to allow readers to interact with your website and link to other pages on website.
How many ways to create button in HTML?
1. Using anchor tag
2. Using button tag
Create button using button or anchor tag
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: green;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Create Button Using HTML AND CSS</h2>
<a href="#" class="btn">Link Button</a>
<button class="btn">Button</button>
</body>
</html>
Output:
How to create a clickable button in HTML ?
Clickable button create using javascript.
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
background-color:black;
color:white;
padding:10px 20px;
}
</style>
</head>
<body>
<h1>The button Element</h1>
<button class="btn" type="button" onclick="alert('Hello world!')">Click Here</button>
</body>
</html>
Clickable button create using HTML.
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
background-color:black;
padding:10px 20px;
}
.btn a{
color:white;
text-decoration:none;
}
</style>
</head>
<body>
<h1>The button Element</h1>
<button class="btn" type="button"><a href="#">CLICk Hrere</a></button>
</body>
</html>
FAQ
Question1: How to make a clickable button?
Answer: In HTML we are using anchor tag and in javascript we are using onclick function to create a clickable button.
Question2: How to make a clickable button in html?
Answer: In HTML we are using anchor tag to create clickable button.
Question3: How to style button using CSS?
Answer: Following CSS prosperity helps to design button:
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
Question4: How to make a clickable button in html?
Answer: The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon