demo Button On blogger
Style 01.
HTML Code-01
<div id="wrap"><a href="#" class="btn-slide"><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="#" class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span class="title2">Download</span><span class="title-hover2">Click here</span></a></div>
CSS Code-01
This Code Use Only Your CSS Code.
body {margin: 50px; font-family: helvetica, sans-serif; background: #e9f0f4;}#wrap {margin: 20px auto;text-align: center;}.btn-slide, .btn-slide2 {position: relative;display:inline-block;height: 50px;width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s;}.btn-slide2 { border: 2px solid #efa666;}.btn-slide:hover { background-color: #0099cc;}.btn-slide2:hover { background-color: #efa666;}.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}.btn-slide2:hover span.circle2 { color: #efa666;}.btn-slide:hover span.title, .btn-slide2:hover span.title2 {left: 40px;opacity: 0;}.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {opacity: 1; left: 40px;}.btn-slide span.circle, .btn-slide2 span.circle2 {display: block;background-color: #0099cc;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0; left: 0;transition: .5s;border-radius: 50%;}.btn-slide2 span.circle2 {background-color: #efa666;}.btn-slide span.title,.btn-slide span.title-hover, .btn-slide2 span.title2,.btn-slide2 span.title-hover2 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #30abd5;transition: .5s;}.btn-slide2 span.title2,.btn-slide2 span.title-hover2 {color: #efa666;left: 80px;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {left: 80px;opacity: 0;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {color: #fff;}
STYLE-02
HTML CODE-02
This Code Use Only for Where Use This Button.
<div style="text-align: center;"><ul class="btn"><li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li><li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li></ul></div>
CSS CODE -02
This Code Use Only Your CSS Code.
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}.btn ul {margin:0;padding:0}.btn li{display:inline;margin:5px;padding:0;list-style:none;}.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}.demo {background-color:#3498DB;}.download {background-color:#1ABC84;}.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
কোন মন্তব্য নেই