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:
Our HTML looks like this:
<body>
<div class="container">
<button class="btn">Click Me</button>
</div>
</body>
Our stylesheet looks like this currently:
.btn {
padding: 4px 8px;
background-color: red;
border-radius: 4px;
border: none;
}
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;
}
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:
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)