Changing Confirmation Button Color Appointments+

I've been trying to figure out how to change the styling of the buttons to confirm an appointment, but none of the ones that I've tried on the first page of the Google search seem to work
(https://www.google.com/search?q=appointments%2B+button+style&ie=utf-8&oe=utf-8#q=appointments%2B+button+style+wpmu)

CSS isn't a strong suit of mine apparently. Anyway, I'm trying to change the background color of the confirmation button and cancel button to #04abff, and make the text white, and hopefully make the buttons look a little bit more sleek overall. They seem kind of crammed together for some reason.

  • Predrag Dubajic

    Hey @Shawn Torsitano,

    Hope you're doing well today :slight_smile:

    I added code below to your global CSS field and this should make those two buttons, including the Show Available Time one to look more like your other buttons, with color, size and hover effect.
    Check it out and let me know if that's what you wanted to do.

    This is the code used:

    .app_services_dropdown_select .app_services_button,
    .appointments-confirmation-cancel-button,
    .appointments-confirmation-button {
        background: #04abff;
        color: #e3e9f0;
        font-size: 14px;
        font-weight: 700;
        font-style: normal;
        line-height: 2;
        border: 1px solid rgb(0, 2, 243);
        border-radius: 4px 4px 4px 4px;
        background-color: #0466ff;
        transition: all 0.2s linear;
        padding: 4px 25px;
    }
    
    .app_services_dropdown_select .app_services_button:hover,
    .appointments-confirmation-cancel-button:hover,
    .appointments-confirmation-button:hover {
        color: #0466ff;
        font-size: 14px;
        line-height: 2;
        font-weight: 700;
        font-style: normal;
        border: 1px solid rgb(0, 2, 243);
        border-radius: 4px 4px 4px 4px;
        background-color: rgba(168, 144, 132, 0);
    }
    
    .appointments-confirmation-button {
    	margin-bottom: 10px;
    }

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.