Change shadow color


Topic: Change shadow color

tiago1 pro asked 6 years ago

Hi. I need to change the color of the shadow to the same color as the main button color. How can I do it, please?Consider also the colors of the shadow in all  button's states. Thank you

Marta Szymanska staff pro premium answered 6 years ago

Hi, for primary button try this code:
.btn {
box-shadow: 0 2px 5px 0 rgba(66, 133, 244,.16), 
0 2px 10px 0 rgba(66, 133, 244,.12);
}
.btn:active, .btn:focus, .btn:hover {
box-shadow: 0 5px 11px 0 rgba(66, 133, 244,.18), 
0 4px 15px 0 rgba(66, 133, 244,.15);
}
.btn-primary:not([disabled]):not(.disabled):active {
box-shadow: 0 5px 11px 0 rgba(66, 133, 244,.18), 
0 4px 15px 0 rgba(66, 133, 244,.15);
}
.btn-primary:not([disabled]):not(.disabled).active:focus, 
.btn-primary:not([disabled]):not(.disabled):active:focus {
box-shadow: 0 5px 11px 0 rgba(66, 133, 244,.18), 
0 4px 15px 0 rgba(66, 133, 244,.15);
}
Best, Marta
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No