Without wasting anytime let's get straight to the Main Point. In-order to Install a Gradient CSS Button with Hover Effect in your BLOG, you need to complete 2 processes which are given below. Follow them and be patient.
| # | PROCESS # 1 ‧ CSS |
|---|
| 1 | Go into your Theme's EDIT HTML |
| 2 | Search ]]></b:skin> |
| 3 | Now Copy the below code & Paste it before ]]></b:skin> |
/* Hover Glow Effect Button */
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #transparent;
}
.glow-on-hover:active:after {
background: #transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #f2a65a, #772f1a, #f2a65a, #772f1a, #f2a65a, #772f1a);
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
/* Hover Glow Effect Button End */
Step #4: Save it & Exit from there
| # | PROCESS # 2 ‧ HTML |
|---|
| 5 | Now Visit: draft.blogger.com |
| 6 | Create a + NEW POST |
| 9 | Copy the below code & Paste it in the HTML view. |
<div style="text-align: center;"><a href="#" target="_blank"><button class="glow-on-hover" type="button">DOWNLOAD</button></a>
Step #10: Publish the Post
HOW TO CHECK THAT IT INSTALLED OR NOT?
1. View your Post after Publishing it.
