Interesting Hover Effects

Awesome hover effects await!

This is a fun little interaction that is pretty easy to execute. In the past we explored how to create buttons in Canvas, and today we will elaborate on that and add interactive hover effects for those buttons, meaning the buttons will interact with the mouse cursor and either change color or add an effect. Once you execute the initial setup (the external CSS in your Canvas Theme Editor), adding these effects to your Canvas pages will be a breeze.

External CSS

The first portion of this interaction consists of code that needs to be uploaded into the Canvas Theme Editor. I would suggest copying and pasting my code directly into your beta or test institution CSS file. Play around with the settings: change the colors, try different dimensions and letter spacing, etc. And of course, you are welcome to use whatever naming conventions you choose.

/*
*
* ==========================================
* BUTTON HOVER EFFECTS
* ==========================================
*
*/

/* Fade */
.hover-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
  background-color: #008EE2;
  color: white;
}

/* Fade Red*/
.hover-fade-red {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade-red:hover, .hover-fade-red:focus, .hover-fade-red:active {
  background-color: #A63446;
  color: white;
}


/* Border Fade */
.hover-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px   rgb(255, 255, 255, 0.0), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hover-border-fade:hover, .hover-border-fade:focus, .hover-border-fade:active {
  box-shadow: inset 0 0 0 4px #008EE2, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}



/* Glow */
.hover-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-glow:hover, .hover-glow:focus, .hover-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}


/* Shadow */
.hover-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

HTML

The HTML for this effect is incredibly simple and straightforward. Follow the video instructions for a demonstration. You will want to create your button and add your class to your element. In this tutorial, I am focusing on button HTML elements, but you can also add these hover effects to images or other HTML elements.

Below is an example of a Canvas button that has the hover glow effect (and a 5 pixel margin):

<a class="btn btn-large btn-publish hover-glow" style="margin: 5px;" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Extra Credit</a>

This is an incredibly simple, but also a slick interaction. Feel free to modify the colors to match your institutional color scheme or your own palette preferences.

Happy teaching and learning!

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas