How do you make a button show a shadow only on hover?

jesserhaywood

I'd love to have the shadow only show when I hover on the button. Is there a way to do this easily?

Thomas_Connery

Please save a backup before experimenting with CSS. A CSS expert will likely have a more thorough response but this code will work. You'd replace the u_####### with your unique id:

*#dm *.dmBody a.u_1808820939:hover  {

   -moz-box-shadow: 0 0 10px #ccc;

   -webkit-box-shadow: 0 0 10px #ccc;

   box-shadow: 0 0 10px #ccc;  }

Aj_Cre8

@Thomas_Connery Gave you a great solution that will work. We prefer to create Custom Classes within the site.css in the Developers mode. Then we can add that class to whatever buttons we wish.

.myButtonClass{
     width: 200px !important;
     height: 50px !important;
     transition: 0.3s ease all !important;
}
.myButtonClass:hover{
     box-shadow: 0px 10px 20px -5px #00000075 !important;
}

Then you can right click the buttons you want to add the effect to, click Edit HTML / CSS and add the class to the buttons.

That is just how we do it.