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

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

Answers

  • Thomas_Connery
    Thomas_Connery Member Posts: 35 MVP
    edited February 18

    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
    Aj_Cre8 Member Posts: 342 MVP

    @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.