Call-to-action buttons — Gradient Hover Effects & Implementation (Part I)
Hello there! Here are some simple and beautiful ideas for button hover effects.
— 1) FROM the simple background color TO gradient background with shadow on hover:
Example with Sass Technology //_variables.scss file:
$green-yellow: #dbe127;
$petrol: #6FC6BD;//_global.scss file:.call-to-action-btn{
background: linear-gradient(90deg, var(--c1, $green-yellow), var(--c2, $petrol) 51%, var(--c1, $green-yellow)) var(--x, 0)/ 200%;
border-radius: 24px;
padding: 15px 40px;
font-size: 13px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: $white;
cursor: pointer;
box-shadow: 0px 0px 0px 0px $light-grey;
@include transform(translateX(0));
@include transition(all 0.4s ease); &:hover{
--x: 100%;
box-shadow: -6px -9px 2px -2px $light-grey;
@include transform(translateX(10px));
@include transition(all 0.4s ease);
} &.green-yellow{
--c1: $green-yellow;
--c2: $green-yellow; &:hover{
--c1: $green-yellow;
--c2: $petrol;
}
}
}
You can read more about mixins and how you can create some of them, here: https://medium.com/@vasdekijoanna/sass-scss-useful-mixins-for-faster-development-b5ac5d4a5de
//HTML code<a href="/link" title="read more link">
<div class="call-to-action-btn green-yellow">READ MORE</div>
</a>
As you can see, I’ve created a .green-yellow class. What happens when I remove the .green-yellow?
— 2) FROM the gradient background color TO reverse gradient background with shadow on hover:
The only thing you have do is to remove .green-yellow class from your HTML.
You will be satisfied with the results. Smoothly and elegant!!! See you soon…
