Embed HackingUniversity Style Demo & Download Buttons

Well it was a very humble request from our very loyal reader Shubham Mishra well he just requested us to post a tutorial on how we have actually embedded those demo, download, visit and installation buttons, well we have actually created those buttons using CSS and he just wanted to embed all those buttons in his website. Well here you go dear I have just taken all those CSS Codes and now I am sharing it with all the readers so that they can also embed the same buttons right in their own website.

Well as you can see from the image on the right how actually the buttons look like, So now just follow the below tutorial and enjoy.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below CSS above it.

   a:active{box-shadow:none;position:relative;top:1px}#ddbutton,.downloadbutton,.demobutton,.installbutton,.visitbutton,.ps-button{-moz-box-shadow:0 3px 4px -3px #999,inset 0 1px #fff;-webkit-box-shadow:0 3px 4px -3px #999,inset 0 1px #fff;box-shadow:0 3px 4px -3px #999,inset 0 1px #fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#ddbutton{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgkvX43v5QVgvVHh2JGAhd14cf92HYpXIjQ3if__jssG5O8Xc9O-dCc4mDWPbQTATsR8aN4MTmDaNMqA26BzS_ruK5xJkdwU6YKUocNHebGrkGtilt-HYzX8qgrVKLc_ZHxzOO1-1opUq/s0/bg-pattern.png) repeat top left;border:1px solid #aaa;box-shadow:inset 0 0 3px 1px #aaa;float:right;margin:5px 0 5px 20px;padding:5px 6px 5px 0;text-align:center;width:186px}#ddbutton a:hover{border-bottom:none}.button{color:#FFF!important;cursor:pointer;font-size:15px;font-weight:700;padding:15px;position:relative;text-shadow:0 -1px 1px rgba(0,0,0,0.25);text-transform:uppercase}.downloadbutton,.demobutton,.installbutton,.visitbutton,.ps-button{text-align:center;width:150px;-moz-box-shadow:0 5px 5px -5px #999,inset 0 0;-webkit-box-shadow:0 5px 5px -5px #999,inset 0 0;box-shadow:0 5px 5px -5px #999,inset 0 0}.downloadbutton{background-color:#91BD09}.demobutton{background-color:#2DAEBF;margin-top:5px}.installbutton{background-color:#F93}.visitbutton{background-color:#C39}.ps-button{background-color:#ff007b;margin-bottom:5px}

3. Now your styles are pasted, now its time to execute the style in form of HTML snippet, so below are the codes for all the download buttons.
4. Now to embed all these buttons you simply need to copy the codes from below and then switch to the HTML tab in your post editor and then paste the code, press the preview button to see if the button is live.
5. Single Download Button - well if you wish to embed a single download button for giving direct download links to your readers, then simply copy the below code.

   <div id="ddbutton"><a class="button downloadbutton" style="float: right;" href="xxxxx" rel="nofollow" target="_blank"><span style="display: inline-block;">Download Now</span></a></div>

6. Demo & Download Button - so if you are posting some blogger templates then you can embed the demo and download buttons that will help you to preview the template and even download the template easily.

   <div id="ddbutton"><a class="button downloadbutton" style="float: right;" href="xxxxx" rel="nofollow" target="_blank"><span style="display: inline-block;">Download Now</span></a><a class="button demobutton" style="float: right;" href="xxxxx" rel="nofollow" target="_blank"><span style="display: inline-block;">View Live demo</span></a></div>

7. Install Button - if you love to post any good chrome extension, then you can even embed this install extension button that can hold your direct extension link.

   <div id="ddbutton"><a style="float: right" class="button installbutton" href="xxxxx" rel="nofollow" target="_blank"><span style="display: inline-block">Install Extension</span></a></div>

8. Play Store & Download Button - well if you are posting so many android apps then you can embed this play store and direct download button, using this you can embed play store link and download link easily.

   <div id="ddbutton"><a style="float: right" class="button ps-button" href="xxxxxxxxxx" rel="nofollow" target="_blank"><span style="display: inline-block">Play Store Download Link</span></a><a style="float: right" class="button downloadbutton" href="xxxxxxxxxxxx" rel="nofollow" target="_blank"><span style="display: inline-block">Google Drive Download Link</span></a></div>

9. Simple Visit Button - for just sending your visitors to any website you can also add this simple visit button, hope you find this useful.

   <div id="ddbutton"><a style="float: right" class="button visitbutton" href="xxxxx" rel="nofollow" target="_blank"><span style="display: inline-block">Visit Website</span></a></div>

So guys now you just need to replace the red xxxx with your link and you can even rename the button text by replacing the text in blue color. So Shubham Mishra hope this tutorial is useful for you and you find exactly what you were looking for, well if anyone of you want something else then you request the same way this awesome person did and we will try to help you out.

Embedding these Buttons using Live Writer

Well if you are using Live Writer for writing your posts, then you can use the Text template plugin to store all the snippets and then add them easily by just clicking on the name. Well its really handy and even I use it like that.