Installing the Slide Button on the Blog

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.

Installing Slide Button on Blog - For tips this time only you just need to put the CSS code, unlike the others, this button uses a simple "hover" and "inset" effect so it won't burden the blog's performance.

Ok, let's just go straight to the tutorial:

1. Save the CSS above </style>
 

#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}

2. Then use the markup below in the HTML tab editor

<div id="wrap"><a class="btn" href="#">Button</a></div>
<div id="wrap"><a class="btn warn" href="#">Button</a></div>

3. Save.

In order to make the appearance more interesting, please make friends again. thanks.

Link will be apear in 15 seconds.

Well done! you have successfully gained access to Decrypted Link.

Share this post