Modifying Button Styles in Elements on Home Page

[NiikaQ]

Hi!

1) How do I change colors for borders, backgrounds, and text for buttons for rollover AND nonrollover? See screenshots attached of buttons with the mouse off and hovering over. I understand that there are preset styles such as “black”, “transparent-light”, and “transparent-dark” present in the code but I do not know where to visually modify these presets or create new ones.

2) Where can I modify the size of the text in the buttons and the size of the button itself?

Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Please use these for the example in your homepage.

/* Color and Hover Color */

a.sf-button.stroke-to-fill {
    color: #ff6666!important;
}
a.sf-button.transparent-light:hover {
    color: #ff6666!important;
}

/* Border and Background Color and Hover Color */

a.sf-button.transparent-light {
    border: 2px solid red!important;
    background: red!important;
}
a.sf-button.transparent-light:hover {
	border: 2px solid blue!important;
	background: blue!important;
}

2) You can change the button shortcode size, standard or large for example.

Thanks.