Button CSS

If you’re trying to add a link that looks like a button, Sketch doesn’t come with any premade styles, so you’ll need to add your own via CSS.

Otherwise, you can use the button element – those are pre-styled to match Sketch’s look and feel.

If you go the CSS route, don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Hey Kathryn!

I have the same question as above… Can you explain what you mean by the button element?

I have tried using this button shortcode:

[button align="center" color="white" size="small" link="urlhere"]Button Text Here[/button]

But I’m not getting anything to work on the site.

What @kathryn was saying is to use the “button” HTML. This is an example that you can use as a guide. The styling would be the default styling of the button element for the theme, or if the theme doesn’t have styling for that element, then what the browser decides.

<button>Click Me!</button>

If you wish to add your own styling to that button, then you would need to add a CSS class or an id to that code, such as this.

<button type="my-button">Click Me!</button>

The above would be placed into the page or post content and then you would have to create a CSS rule to style it as you see fit, such as the below example.

.my-button {
    background-color: #cc0000;
    color: #000;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 20px;
}