-->

2 Stylish Css Demo Download Button For Blogger

 यदि आप ब्लॉग्गिंग करते है तो आपके लिए बहुत ही उपयोगी पोस्ट है इस पोस्ट में हमने आपको 2 Stylish Css Demo Download Button For Blogger के बारे में बताया है जो आपके लिए उपयोगी होगी। 

आपके वेबसाइट के लिए बहुत ही अच्छा सा स्क्रिप्ट है है जिसकी सहायता से आपको डाउनलोड बटन मिल सकता है इसके ज्यादा कोडिंग नहीं की गयी है इसके सिंपल CSS और HTML language का प्रयोग किया गया है। इस बटन को सुन्दर दिखने के लिए इसमें Font Awesome जोड़ा गया है। यदि आप चाहते है इसके फॉण्ट को स्टाइलिश दिखाए तो आप इसमें बदलाव कर सकते है। 

यहाँ पर आप डेमो देख सकते है -

How to use Dowload button 

CSS //

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.bsd-btn-slide, .bsd-btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #00CC00;
    margin: 10px;
    transition: .5s;
}

.bsd-btn-slide2 {
    border: 2px solid #FF3300;
}

.bsd-btn-slide:hover {
    background-color: #00CC00;
}

.bsd-btn-slide2:hover {
    background-color: #FF3300;
}

.bsd-btn-slide:hover span.circle, .bsd-btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #00CC00;
}

.bsd-btn-slide2:hover span.circle2 {
    color: #FF3300;
}

.bsd-btn-slide:hover span.title, .bsd-btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.bsd-btn-slide:hover span.title-hover, .bsd-btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.bsd-btn-slide span.circle, .bsd-btn-slide2 span.circle2 {
    display: block;
    background-color: #00CC00;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.bsd-btn-slide2 span.circle2 {
    background-color: #FF3300;
}

.bsd-btn-slide span.title,
  .bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #FF3300;
    transition: .5s;
}

.bsd-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    color: #00CC00;
    left: 80px;
}

.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    color: #fff;
}

HTML

<div id="wrap">
<a href="www.sabhow.com" class="bsd-btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="www.sabhow.com" class="bsd-btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Customization

Aapne Link Ke sath Code me Apna Link Insert karke Replace kar sakte hai.