Installing the Slide Button on the Blog - NETRAL'ID
Installing the Slide Button on the Blog
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.

Installing the Slide Button on the Blog

Installing the Slide Button on the Blog
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.
Load Comments

Subscribe Our Newsletter

Notifications

Disqus Logo