Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Customizing Acabado Homepage Buttons

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

There have been requests to be able to modify the buttons on the homepage. Currently, there is no method within the Acabado theme that allow for this style of customization.

Below you will find the custom CSS you can apply to allow you to make changes to the button styles. If you need to learn about Acabado and custom CSS go here.

Hero Button

This button is the one which you get when you enable the hero section on the homepage. This button depending on your needs may be better served to have changes to be different text size, button color or text color.

button.large, input[type="button"].large, input[type="reset"].large, input[type="submit"].large, .button.large {
    /* Font Size (EM is large jumps so increment slowly) */
    font-size: 1.5rem;
    /* Padding (10px (L and R Side), 25px (Top and Bottom) */
    padding: 10px 25px;
}

View Posts Buttons

button, input[type="button"], input[type="reset"], input[type="submit"], .button {
    /* Color Of The Button */
    background: #568203;
    letter-spacing: 2px;
    line-height: 3;
    border-radius: 47px;
    text-decoration: underline;
    transition: all .5s;
}

button, input[type="button"], input[type="reset"], input[type="submit"], .button {
    border: 1px solid transparent;
    /* Font Color For Text */
    color: #fff !important;
    font-family: "roboto_condensedregular",sans-serif;
    /* Padding (8px (L and R Side), 18px (Top and Bottom) */
    padding: 8px 18px;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: bold;
}

Bottom Line

As with all code changes, this is at your own risk, with CSS worst case you can remove your changes by deleting the CSS code you put in your custom CSS.

If you need help or have questions please post in the comments so that I see them and get notified.

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

2 thoughts on “Customizing Acabado Homepage Buttons

  1. At homepage settings, I have disabled Hero Button Text and Hero Button Link, but in the image it is still showing small square in the middle. How can I remove this?

    1. Did you remove the text from all those fields? If not enable it and delete all the contents and then disable and check.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content