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

jesserhaywood
jesserhaywood Member Posts: 2
in Ask a Question

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: 158 MVP
    edited February 2022

    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: 563 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.

Categories