Restyling The Header Call To Action Buttons

Hey Awan (or Ivan or anyone who can help). I am as excited as my client to be working with the Perth theme. I have taken your advice (to me on other themes and to others here on this theme) and figured out several customizations we wanted and needed. I am not finished but know most of what else needs to be done at

I really hate it when people ask how to change the Athemes designs to look like plain themes or other silly designs that do not go… but with that said… I really need to restyle the right call to action header button. I love the design but client has picked a “busy” background image I created with a New York Apartment and a Houston Skyline. It makes the right button too hard to see.

I need the second button to be more like the first, either the same or opposite colors and plain and square.

I know it is simple copy/pasting the first buttons code and replacing the second buttons code with the copy (then many reverse the colors) but I am afraid I will mess up your great coding and crash the front page!

Sorry for the long post. Thanks for any help.

Hi, sorry for delays :slight_smile:

So you want the right button has the same design as the left one? Then here is the css code:

.header-button.right-button {
    background-color: #315B9D;
    color: #FFF;
    border-color: #FFF;

.header-button.right-button:hover {
    background-color: #FFF;
    color: #315B9D;
    border-color: #315B9D;

And actually, yes its only copy+paste the style code from the left button. Hope its help :slight_smile:


This helps only the white stripes are still visual. Can someone tell me how to shorten them of delete them?