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
-
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; }
1 -
@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.
2
Categories
- 665 All Categories
- 2 Getting Started
- 48 Announcements
- 587 Ask a Question
- 15 Going Live & Publishing
- 82 Website Builder
- 5 App Store
- Custom Branding & Client Management
- 4 Team Collaboration
- 14 eCommerce
- 35 Conversations
- 2 Industry News
- 3 Website Design Feedback
- 2 Random
- 7 Idea Board
- Duda Experts
- 4 Events