Hello,
Please advise how to set the button animation in reverse in the Magnin template?
The default button will be blue and will turn transparent when hovered over.
Best regards, Milan
Staff replied
Templates
Changing button animation in Magnin template
5 replies
Mehtaz Afsana Borsha Staff
Hi
Thanks for contacting us. Could you please check your site? I cant access on that.
-Regards.
Milan Asked this
Hello,
I'm sorry, the temporary address is no longer functional, I'm sending a new url.
Best regards, Milan
Mehtaz Afsana Borsha Staff
Hi
You can use this CSS in your custom.css file
body .sppb-btn.sppb-btn-default:after, body .sppb-btn.sppb-btn-primary:after, body .sppb-btn.btn-primary:after, body .btn.sppb-btn-default:after, body .btn.sppb-btn-primary:after, body .btn.btn-primary:after{
background: #627be6 !important;
}
body .sppb-btn.sppb-btn-default:hover, body .sppb-btn.sppb-btn-default:focus, body .sppb-btn.sppb-btn-default:active, body .sppb-btn.sppb-btn-primary:hover, body .sppb-btn.sppb-btn-primary:focus, body .sppb-btn.sppb-btn-primary:active, body .sppb-btn.btn-primary:hover, body .sppb-btn.btn-primary:focus, body .sppb-btn.btn-primary:active, body .btn.sppb-btn-default:hover, body .btn.sppb-btn-default:focus, body .btn.sppb-btn-default:active, body .btn.sppb-btn-primary:hover, body .btn.sppb-btn-primary:focus, body .btn.sppb-btn-primary:active, body .btn.btn-primary:hover, body .btn.btn-primary:focus, body .btn.btn-primary:active{
border-color: #627be6 !important;
}
Milan Asked this
Hello,
I inserted the code into https://teslacentrum.cz/templates/magnin/css/custom.css
the correct color should be #E8461D
The button behaves the same - I need to reverse the behavior.
- / When the button is not active, it will have the color #E8461D
2./ When I hover over the button with the cursor, an animation is performed and the button will be transparent with a white border.
Best regards, Milan
Mehtaz Afsana Borsha Staff
Hi
You can now use this CSS
body .sppb-btn.sppb-btn-default:after, body .sppb-btn.sppb-btn-primary:after, body .sppb-btn.btn-primary:after, body .btn.sppb-btn-default:after, body .btn.sppb-btn-primary:after, body .btn.btn-primary:after{
background: transparent !important;
color: #fff !important;;
border-color: #fff !important;
}
body .sppb-btn.sppb-btn-default:hover, body .sppb-btn.sppb-btn-default:focus, body .sppb-btn.sppb-btn-default:active, body .sppb-btn.sppb-btn-primary:hover, body .sppb-btn.sppb-btn-primary:focus, body .sppb-btn.sppb-btn-primary:active, body .sppb-btn.btn-primary:hover, body .sppb-btn.btn-primary:focus, body .sppb-btn.btn-primary:active, body .btn.sppb-btn-default:hover, body .btn.sppb-btn-default:focus, body .btn.sppb-btn-default:active, body .btn.sppb-btn-primary:hover, body .btn.sppb-btn-primary:focus, body .btn.sppb-btn-primary:active, body .btn.btn-primary:hover, body .btn.btn-primary:focus, body .btn.btn-primary:active{
background: #627be6 !important;
border-color: #627be6 !important;
}Log in to reply.