How do we make a button in HTML and CSS?/ हम HTML और CSS में बटन कैसे बनाते हैं?

Buttons are important element of interaction design. Buttons are common elements in UI design, it create more interaction in website./ बटन इंटरेक्शन डिज़ाइन के महत्वपूर्ण तत्व हैं। UI डिज़ाइन में बटन सामान्य तत्व हैं, यह वेबसाइट में अधिक सहभागिता बनाता है।

Buttons are used on:/ बटन का उपयोग किया जाता है:

forms/ फार्म
website homepages/ वेबसाइट होमपेज
dialog boxes/ डायलॉग बॉक्स
and toolbars/ और टूलबार

It is a basic question of all beginners web designer "How can design a button?"

यह सभी शुरुआती वेब डिज़ाइनर का एक मूल प्रश्न है "एक बटन कैसे डिज़ाइन कर सकते हैं?

". इसे डिजाइन करना बहुत आसान है, बटन को डिजाइन करने का मूल तरीका निम्नलिखित है।

Button tag
Anchor tag
Input tag

What is a button called on a website?
CTA(Call To Action)

How do you code a button?

Example

<html>
<head>
<style>
/* main div styling */
.main-div {
max-width: 600px !important;
margin: 60px auto;
background-color: #f2f2f2;
padding: 50px 50px;
}
/* end code */
/* button styling */
.btn {
background-color: #000000;
border: none;
color: white;
padding: 16px 33px;
text-align: center;
text-decoration: none;
font-size: 15px;
margin: 4px 2px;
}
/* end code */
</style>
</head>
<body>
<div class="main-div">
<h2>Buttons design using HTML and CSS</h2>
<button>Default Button</button>/* default button design */
<a href="#" class="btn">Link Button</a>/* button design using anchor tag */
<button class="btn">Button</button>/* button design using button tag */
<input type="button" class="btn" value="Input Button">/* button design using input tag */
</div>
</body>
</html>

Output:

How do I animate a button in HTML?/ मैं HTML में एक बटन को एनिमेट कैसे करूं?

<html>
<head>
<title>Document</title>
<style>
body {
background-color: #f2f2f2;
}
.main-div{
max-width:300px;
margin:40px auto;
}
.qodef-button {
background: #000000;
color: #ffffff;
position: relative;
display: inline-block;
vertical-align: middle;
width: auto;
margin: 0;
font-family: Muli, sans-serif;
font-size: 15px;
line-height: 2em;
font-weight: 600;
text-decoration: none;
border-radius: 0;
outline: 0;
padding: 16px 29px 17px 30px;

}

.qodef-button .qodef-m-split {
position: absolute;
height: 50%;
width: 0;
background: #939DB5;
/* z-index: 1; */
transition: .3s cubic-bezier(.785, .135, .15, .86);
}

.qodef-button .qodef-m-text {
z-index: 2;
position: relative;
}

.qodef-button .qodef-split--up {
top: 0;
left: 0;
right: auto;
}

.qodef-button .qodef-split--down {
bottom: 0;
right: 0;
left: auto;
}

.qodef-button:hover .qodef-split--up {
width: 100%;
right: 0;
left: auto;
}

.qodef-button:hover .qodef-split--down {
width: 100%;
left: 0;
right: auto;
}
</style>
</head>
<body>
<div class="main-div">
<a class="qodef-button" href="#" target="_self">
<span class="qodef-m-text">Read More </span>
<span class="qodef-m-split qodef-split--up"></span>
<span class="qodef-m-split qodef-split--down"></span>
</a>
</div>
</body>
</html>

Output:

I hope you have learned from reading this post. If you like this post then share it with your friends and you can comment on any of your doubts and I will replay then at the earliest.

मुझे उम्मीद है कि आपने इस पोस्ट को पढ़कर सीखा होगा। अगर आपको यह पोस्ट पसंद आया हो तो इसे अपने दोस्तों के साथ शेयर करें और आप अपने किसी भी संदेह पर टिप्पणी कर सकते हैं और मैं इसे जल्द से जल्द फिर से चलाऊंगा।