Utilizing gradients to create stylish hover states

CSS3 Gradients provides us developers with endless opportunities to be creative with our UI. We often use gradients to produce aesthetic backgrounds spanning two or more colors across an element in a smooth transition. Today, we're going to be using these gradients in a different manner, ensuring each transition between colors will be a sharp, non-blended conversion.

This can be achieved by specifying the points in which the gradient will be changing to different colors. We can do this by introducing a parameter for positioning, placed after each color declaration. A simple two-colored gradient with a sharp transition would look something like this:

background-image: linear-gradient(to left, hotpink 0%, hotpink 50%, purple 50%, purple 100%)

The block of code you can see above would produce the below gradient.

In order to create some stylish button hover states using gradients, we will be adding our styles to the button, which will likely be inserted using a <button>, or an <a> tag. Then, using background-size, we would apply the size 100% to our element the gradient, making sure only the second half of the gradient is being shown.

In this example, I am going to be initially setting the background-position to 100%, so it will show the second half (which will render purple) of the gradient, and then specifying background-position: 0% in the hover state. This is because I prefer the transition to carry out from left to right, rather than right to left. Feel free to use whichever you'd prefer in your own project!

.button {
  background-image:linear-gradient(
    to left, 
    hotpink 0%,
    hotpink 50%,
    purple 50%,
    purple 100%
  );
  background-size:200%;
  background-position:100%;
  transition:all .3s ease-in-out;
}

.button:hover {
  background-position:0%;
}

Above is the barebones needed for a gradient-based hover state. Now, we're going to be adding the gradient angle, and other awesome styles required to create the awesome button at the top of the page.

Firstly, we're going to change to left, to a degree value of our choice. I'm going to go with -70deg, but please play around with these numbers and find your favorite!

Then, we'll add transform: scale(1.05), and the box-shadow. These are used together as the scale property allows us to enlarge the button without moving around the other elements on our page, and the box-shadow works perfectly in making the button look like it's jumping up out of the screen!

The final code for the button seen at the top of the page is as follows:

.button {
    background-image: linear-gradient(
      -70deg, 
      hotpink 0%,
      hotpink 50%,
      purple 50%,
      purple 100%
    );
    background-size: 220%;
    background-position: 100%;
    transition: all .3s ease;
  
    /* Unnecessary styling */
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-shadow: -1px 0px 1px rgba(0,0,0,.7);
}
  
.button:hover {
    background-position: 0%;
    transform: scale(1.05);
    box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0.15);
}

Kubsz

Web Developer