Change style of button


#1

Hello again…

I was wondering if it was possible to change the style of the CTA button in the Welcome Area. As I was looking at some of the websites made with this theme, I noticed a couple that had arrow buttons instead of the rectangle with text (looks like ‘>’ but pointing downwards). How can I change my CTA button to an arrow?

Thanks!

Ashton


#2

Hello Ashton,

I would be glad to help you, but can you please provide a link to your website and some explanatory screenshots?

Kind Regards, Roman.


#3

Hi,

My website is ashtonclaire.com. Here are some screenshots–

39%20AM

An arrow like this pointing downwards is what I’m trying to achieve. Thank you!

Ashton


#4

Hello Ashton, try to do the following as a workaround.

  1. Go to Customize → Welcome Area section, and paste this into The text for the call to action button field: “\/”. Then paste “#primary” into The link for the call to action button field.

  2. Also please add the following CSS code to remove button styling. You can add CSS code in Customize → Additional CSS section.

.welcome-info .welcome-button {
    box-shadow: none;
    background-color: transparent;
    font: 32px Arial, Helvetica, sans-serif;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#5

Hi there,

Thanks for that workaround. To make the button look a little more like what I want, is it possible for me to replace the default button graphic with an image? Maybe by changing the background image to the graphic I created?

Thank you for your help!

Ashton


#6

Hello Ashton,

I don’t think that there is an easy way to do it properly, but you can try to use the following CSS code in order to add down arrow to your existing button.

.welcome-button::after {
    font: 32px/1 FontAwesome;
    content: '\f107';
    display: block;
}

.welcome-button {
    padding-bottom: 0;
    line-height: 1
}

Kind Regards, Roman.