tutorials

Hover Effects

Here's a cool attention grabbing effect you can create using CSS animations. If you don't know what CSS animations are, they make it possible to animate transitions from one CSS style configuration to another. And using these CSS animations, you can move elements around the screen, change their size, color, and other style attributes.

Well.. You could create a gif instead, and that might be better for really simple animations in your website. But again, CSS animations gives you a lot more control and lets you do a lot of complex things.

As hard as it sounds. Everything here has NO javascript!

A brief use of a hover effect:

  <!DOCTYPE html>
  <html>
    <head>
      
    </head>
  
  <style>
  
   button {
  
  background-color: grey;
  transition-duration: 0.5s;
  width: 80px;
  border-radius: 5px;
  border: none;
  transition-duration: 0.5s;
  }
  
  
  button:hover {
  transition-duration: 0.5s;
  width: 90px;
  
  }
  
  
  </style>
  <body>
  
  <button>Click me!</button>
  
  </body>
  </html>

Result:

Go back?