Call-to-action buttons — Gradient Hover Effects & Implementation (Part I)

Photo by Safar Safarov on Unsplash
Image for Example 1
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;
}
}
}
//HTML code<a href="/link" title="read more link">
<div class="call-to-action-btn green-yellow">READ MORE</div>
</a>
Image for Example 2

--

--

--

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jokova

Jokova

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

More from Medium

Guide to convert and pre-process CSS to SCSS (SASS) code.

23 Responsive And Lightweight CSS Frameworks

InternTheory Project

Web development project to practice Dom manipulation in JavaScript

Create a form in your HTML document and a heading.