Archived topic
Styling WooCommerce message banner "Continue shopping" button on cart page
5 replies · Started by Dominique on March 4, 2021
Hi,
I succeeded in styling the button in the message banner for "normal" state.
I did my best for way, way, way too long and couldn't get it to do "hover" & "active" all styling, padding and background colors are lost.
Find details on how to get to the cart page in private information.
CSS:
/* WooCommerce cart message buttons */
.woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button, .woocommerce-page .woocommerce-error .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-message .button {
display: inline-block;
outline: none;
font-family: inherit;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
box-sizing: border-box;
border: 2px solid #d3a933;
border-radius: .3em;
height: 2.2em;
line-height: 1.85em;
padding: 0em 0.5em;
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
inset 0 -2px 5px 1px rgba(139,66,8,1),
inset 0 -1px 1px 3px rgba(250,227,133,1);
background-image: linear-gradient(160deg, #f4da60, #fcf6ba, #efc451, #fbf5b7, #d3a933, #fcf6ba);
color: rgb(0,0,0)!important;
text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
cursor: pointer;
transition: all .2s ease-in-out;
background-size: 100% 100%;
background-position:center;
}
.woocommerce .woocommerce-error .button:hover, .woocommerce .woocommerce-info .button:hover, .woocommerce .woocommerce-message .button:hover, .woocommerce-page .woocommerce-error .button:hover, .woocommerce-page .woocommerce-info .button:hover, .woocommerce-page .woocommerce-message .button:hover {
background-size: 150% 150%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
inset 0 -2px 5px 1px #b17d10,
inset 0 -1px 1px 3px rgba(250,227,133,1);
border: 2px solid #d3a933;
}
.woocommerce .woocommerce-error .button:active, .woocommerce .woocommerce-info .button:active, .woocommerce .woocommerce-message .button:active, .woocommerce-page .woocommerce-error .button:active, .woocommerce-page .woocommerce-info .button:active, .woocommerce-page .woocommerce-message .button:active {
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
inset 0 -2px 5px 1px #b17d10,
inset 0 -1px 1px 3px rgba(250,227,133,1);
border: 2px solid #d3a933;
}My CSS editor says that I am over selective :)
Add /?nowprocket to url to bypass all caches.
Please advise.
To get "Notify me of follow-up replies via email"
Hi there,
Try adding padding: 0em 0.5em; to both your :hover and :active state css sets.
Hi Elvin,
Hope you are doing great.
What I don't understand is that the initial CSS or first block doesn't carry over to the hover & active states like all my other buttons throughout WooCommerce and all the site.
Should I repeat essentially everything in the first CSS declaration except box-shadow so the button actually behaves like all the other buttons?
That's some really weird stuff going on...
Please advise
Got it!
Repeated:
background-image: linear-gradient(160deg, #f4da60, #fcf6ba, #efc451, #fbf5b7, #d3a933, #fcf6ba);Thanks for putting me on the right track :)
Nice one. Glad you got it sorted. :)
