Creating custom buttons in the Suits Theme

awingerter · Member · Oct 2, 2015 at 2:49 am
Copy link

Add topic to favorites
Hello,

What code would I use to create custom buttons in the Suits Theme, like the ones at the top of my page listed below? The current buttons I created are images that are hyperlinked. The font is Montserrat and the background color is 1aa29f.

Thank you!

The blog I need help with is: (visible only to logged in users)
nizamilputra · Member · Oct 2, 2015 at 3:43 am
Copy link
Hello there,

Try to use this css to create a custom button;
```
.btn-green {
    display: inline-block;
    padding: 15px 25px;
    background-color: #1aa29f;
    color: #fff !important;
    font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 100;
    margin: 15px;
    line-height: 1;
}
```
then apply to your HTML like:
<a href="#" class="btn-green">Button</a>

Because of Montserrat is available in Google Font and I think WordPress is not support Google Font yet then I suggest you to use Web Safe font here http://www.cssfontstack.com/.

I use Century Gothic in my example btw.

I hope it will help you.
staff-totoro · Staff · Oct 3, 2015 at 11:20 pm
Copy link
Props @nizamilputra, that’s how I would do it!

In this case though, because Montserrat is being used as the heading currently (it’s one of the fonts we offer with Custom Design) it is being “loaded” with the site, and can be applied to any text element.

For example:
```
.btn-green {
    display: inline-block;
    padding: 15px 25px;
    background-color: #1aa29f;
    color: #fff !important;
    font-family: "Montserrat",sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 100;
    margin: 15px;
    line-height: 1;
}
```
@awingerter, please give either CSS code a try (along with adding the HTML that nizamilputra gave) and let me know if that works for you.

Cheers!
staff-totoro · Staff · Oct 3, 2015 at 11:22 pm
Copy link
Sorry, want to clarify that you can only specify Montserrat in your CSS if you leave it as one of the active font choices on your site, such as it is now for headings.

If you (down the road) change to a different font, Montserrat will not be loaded by the theme anymore, and the CSS will default to the generic sans-serif font.
rafaelswzs · Member · Oct 9, 2015 at 2:22 pm
Copy link
.btn-green {
display: inline-block;
padding: 15px 25px;
background-color: #1aa29f;
color: #fff !important;
font-family: “Montserrat”,sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 100;
margin: 15px;
line-height: 1;
}

No items found.