CSS hover effects with transition

Adding hover effects with CSS can add interest and interactivity to your project, but in many cases it can also add important feedback to your user which increases usability. In this example, we are going to add a “button” class with hover effects to, you guessed it, a button. While we will be using a button in our example, you may apply hover effects to a variety of elements.

Here is our example button:

<button class=”button”>Click Me</button>

The first step is to create your CSS styling for your default button state. This is the styling which will dictate the look and feel of your button when the user is not hovering over it. Look at our example code below and notice this line:
transition: .5s;
This is the half-second timeframe in which your default and hover states will transition between each other in an animated fashion. You can actually omit this if you want your hover effects to go into effect immediately.

The code below will render a button like the above image

.button{
background-color: rgb(44, 44, 44);
color: white;
font-size: 20px;
height: 40px;
width: 200px;
border-radius: 20px;
border-color: white;
border-style: solid;
border-width: 3px;
box-shadow: 0 0 20px rgba(26, 26, 26);
transition: .5s;
}

Now that you have your button class, copy it and paste a new version of it below the original. This version will also be called .button, however you will add “:hover” to the end of the class like this: “.button:hover”. Be sure to remove the “transition: .5s;” from the new hover version of your class. Now go through and make all of your hover state CSS style changes. In the example below we have made changes to every single style.

The code below will render a button like the above image

.button:hover{
background-color: rgb(212, 212, 212);
color: rgb(53, 53, 53);
font-size: 25px;
height: 50px;
width: 300px;
border-radius: 0px;
border-color: rgb(54, 54, 54);
border-style: solid;
border-width: 1px;
box-shadow: 0 0 20px rgb(255, 255, 255);
}

Thats it! There are endless options for you to explore when it comes to hover transition effects. With additional coding you can animate only some styles or all styles as we have done here. You also have the option of giving every style change it’s own transition time. Follow the link below to see a live example of our code.

See it in action