Hover button html css code free download | html css tutorials

नमस्कार दोस्तों, आज की पोस्ट में हमने आपके साथ hover button की कोड साझा किए हैं इस बटन को आप अपनी ब्लॉगर की ब्लॉग पोस्ट और वर्डप्रेस की ब्लॉग पोस्ट में लगा सकते हैं,

hover button html css code free download | html css tutorials

दोस्तों इस कोड को हमने काफी सिंपल रखा है, जिसे आप काफी आसानी से कोड को कॉपी करके डायरेक्ट अपनी वेबसाइट की किसी भी ब्लॉग पोस्ट के अंदर बहुत ही आसानी से लगा सके,

Hover button में क्या बदलाव हो सकते हैं

दोस्तों इस बटन के कोड को हमने काफी सिंपल रखा है, जिसकी वजह से आप इस बटन का text, colour, background colour, URL link, button size इत्यादि बदलाव कर सकते हैं,

Hover button code free download

दोस्तों यहां पर हमने hover button के कोड को आपके साथ साझा किया है, जिसे आप बिल्कुल फ्री में यहां से download कर सकते हैं,

Hover button html css tutorials
Hover button html css tutorials
<body>
<button class="button"><span><a href="https://www.axialwork.com/" target="_blank">Download</a></span></button>
</body>

<style>
.button {
  border-radius: 25px;
  background: #000000;
   background-image: -webkit-linear-gradient(top, #EE1ED2, #3A0FF9);
   background-image: -moz-linear-gradient(top, #EE1ED2, #3A0FF9);
   background-image: -ms-linear-gradient(top, #EE1ED2, #3A0FF9);
   background-image: -o-linear-gradient(top, #EE1ED2, #3A0FF9);
   background-image: linear-gradient(to bottom, #EE1ED2, #3A0FF9);
  border: none;
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-family:Times New Roman;
  padding: 5px;
  width: 180px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -30px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 30px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

Design by: www.axialwork.com

Hover button के कोड को आप अपनी मल्टीपल blog पोस्ट में लगा सकते हैं।

Conclusion:

दोस्तों आपको यह hover button कैसा लगा, हमें कमेंट करके जरूर बताएं, साथ ही इस बटन से रिलेटेड आपके कोई भी सवाल हो तो आप हमें कमेंट करके पूछ सकते हैं,

आगे भी अगर आप इसी तरह की अपडेट प्राप्त करना चाहते हैं, तो हमारी वेबसाइट पर subscribe करके जाएं, धन्यवाद।

Read More Article:

Share This Post:

3 thoughts on “Hover button html css code free download | html css tutorials”

Leave a Reply

Your email address will not be published. Required fields are marked *