How to add a beautifully preview and download buttons using CSS

How to add a beautifully preview and download buttons using CSS

Everyone wants to have beautiful buttons to put them in their website In this post, i will share with you a beautiful buttons to add it in your blog or websites but now let's see a preview :

So if you like it and you want to add them just follow this steps :

Step 1 : search for </head> tag and copy paste the code bellow before it


a{text-decoration: none;} .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 #00c144; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #00c144; } .btn-slide:hover, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #00c144; } .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, .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: #00c144; } .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: #00c144; 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; }

If you don't have the library of Font-Awesome please add this line also before the </head> Tag:

<link href='' rel='stylesheet'/>

Step 2: Click Save Template

Step 3 : In the right place place the bellow code


  • Preview button


<a class="btn-slide" href="" target="_blank">
<span class="circle" style="text-align: center;font-size: 24px;"><i class="fa fa-rocket"></i></span>
<span class="title">Preview</span>
<span class="title-hover">Click Here</span>

Change The Red with your Text , The Blue with the text that show when the user hover on the button and The Green with your link.


  • Download Button


<a class="btn-slide2" href="" target="_blank">
<span class="circle2" style="text-align: center;font-size: 24px;"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click Here</span>

Change The Red with your Text , The Blue with the text that show when the user hover on the button and The Green with your link.
That's all, i wish that you like this buttons *_*.


Subscribe to our Newsletter

Did you find this post useful?
There are no comment yet. Be the first.

Subscribe to the mailing list of our blog and get the latest lessons and topics that are sent directly to your e-mail