Jump to content

Recommended Posts

Phoenix 1.0.7.10

Using the css below creates the button color

.btn-success {
             font-size: .75rem;
             font-weight: 800;
             color: #FDE6FD;
             background-color: #B62285;
             border-color: #B62285;
             }

image.png.ce2c975fd4b188c1cf7b6bcaad9b6a67.png

 

Using the code below creates the mouse-over or hover color

.btn-success:hover {
                   font-size: .75rem;
                   font-weight: 800;
                   color: #B62285;
                   background-color: #FDE6FD;
                   border-color: #B62285;
                   }

image.png.b4ba92175d893e0315ae8e223856363a.png

 

Looking for code to use to change the green when add to cart is clicked, only shows for a second but would like to change it.

image.png.38e37c8330b84fac085e379f0d26d930.png

Tried :focus but didn't work.

Any help would be greatly appreciated, all other buttons would change as well with the basic css.

Thanks,

Doug

 

 

 

 

Share this post


Link to post
Share on other sites
9 hours ago, Dnj1964 said:

Any help would be greatly appreciated,

Open Developer Tools in your browser.
Select the button.
Click the :hov so it turns blue.
Tick in the boxes to see what style is applied, try them all to see what's what (make sure only one is ticked, untick others) - in this case, :active
See something like this:
1215762910_Screenshot2020-11-02073839.png.2add2887d08a68e8ec0dc5f2222edc8c.png

See that style is applied to .btn-success:not(:disabled):not(.disabled):active

Edited by Heatherbell

Download the latest CE Phoenix version here:
https://github.com/gburton/CE-Phoenix/archive/master.zip

Share this post


Link to post
Share on other sites
On 11/4/2020 at 2:15 AM, Heatherbell said:

Open Developer Tools in your browser.
Select the button.
Click the :hov so it turns blue.
Tick in the boxes to see what style is applied, try them all to see what's what (make sure only one is ticked, untick others) - in this case, :active
See something like this:
1215762910_Screenshot2020-11-02073839.png.2add2887d08a68e8ec0dc5f2222edc8c.png

See that style is applied to .btn-success:not(:disabled):not(.disabled):active

Thank you, finally got it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×