Change Link Button Color CSS for Active/Hover

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

This snippet will teach you how to change a link button color (using CSS) for active/hover.

Here we have provided a CSS solution to complete this. 

Add the following CSS to the CSS tab on the parent page (the page that contains the button), not the details page.

.btn-primary, .btn.btn-primary {
    background-image:none !important;
    font-size:14px;
    background-color: #5c8400;
    border-color: #5c8400;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:hover{
    color: #FFFFFF !important;
    background-color: #5C8400 !important;
    border-color: #5C8400 !important;
    outline: unset !important;
}

Original Community Post:

https://community.tadabase.io/t/change-link-button-color-css-for-active-hover/2126