DEV Community

Cover image for Smooth Hover Transitions Using CSS
Amy Oulton
Amy Oulton

Posted on

Smooth Hover Transitions Using CSS

It's standard practice across websites that hovering over certain components like links and buttons will cause them to change their appearance. Usually, it's something slight like adding an underline on a link, or altering the opacity of the text.

There is a built in method you're likely familiar with where you add these desired styles.

Standard Hover Transitions

Let's say we have a class of .btn. Let's say it looks something like the following:

Screen Shot 2021-09-22 at 12.40.06 PM

Our HTML looks like this:

    <div class="container">
      <button class="btn">Click Me</button>
Enter fullscreen mode Exit fullscreen mode

Our stylesheet looks like this currently:

  .btn {
    padding: 4px 8px;
    background-color: red;
    border-radius: 4px;
    border: none;
Enter fullscreen mode Exit fullscreen mode

If we wanted to add a standard hover method that changes the background colour when we hove over it, we would make a new addition to our stylesheet that looks like the following:

 .btn:hover {
   background-color: rosybrown;
Enter fullscreen mode Exit fullscreen mode

The :hover specifies that the proceeding styles are applied when the hover actions occur on the class listed before the :.

Adding this results in the following:

Hover GIF

As you can see, it works perfectly fine, but it's choppy and not as smooth as we would love.

Smooth Transition

We're going to change up how we apply this method. We're going to remove the above :hover addition completely and we will actually be making use of the transition method within the btn class.

Want to see how we've done it? Visit the tutorial on CodeCast to see the full tutorial and code. You don't need an account and it's free, so feel free to check it out!

If you do make an account on CodeCast be sure to give me a follow to stay up to date with the latest tutorials I put out.

Let me know what you think of this method and if you have any other ways of creating smooth transitions that stand out to you!

Top comments (0)