[Debbie]

I’d like to be able to have buttons with the same style as the button in the Promotion Headline section. Is it defined as a class that I can use?

[Sakin]

@Debbie: Which button, you want to change. please post in your site URL and let me know which button are you trying to change.

[Debbie]

My site is http://miboxdallas.yourstagingwebsite.com/, but I don’t want to change any buttons. I want to use buttons that look like the button in the Promotion Headline section. Does it have a defined class that I can use?

[Debbie]

Just adding a little more explanation. Say for example I want to create a link to /contact that is styled just like the Adventurous button that is in the Promotion Headline section.

Does this button have a class such that I can do something like below (where “message-button” would be the class name that you gave this button):

Contact Us

[Sakin]

@Debbie: That button uses the following css:

#homepage-message .right-section a {
    background-color: #28b3c5;
    border: 2px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
    color: #fff;
    display: block;
    padding: 10px 25px;
}
#homepage-message .right-section a:hover {
    background-color: #28b3c5;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) inset;
    text-decoration: none;
}

So, if you want to create link with class then you can add link as
<div class="pro-button"><a href="yourlink.com">Your text</a></div>
Then you can add css like below:

.pro-button a {
    background-color: #28b3c5;
    border: 2px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
    color: #fff;
    display: block;
    padding: 10px 25px;
}
.pro-button a:hover {
    background-color: #28b3c5;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) inset;
    text-decoration: none;
}

[Debbie]

Thanks! This looks great except that it seems to want to go the full width of the content area. For example, I have:

We help bring time and space to your move.  It's that easy! <span class="pro-button"><a href="#">214-377-6016</a></span>

at the bottom of http://miboxdallas.yourstagingwebsite.com/portable-storage-uses/portable-storage-uses-moving, but the text is on one line, and the button is on the next line and is the width of the content area. I only want it to be the width of the text plus a little padding and would prefer that it not go on a new line. No worries if this is beyond the scope of the theme’s support — just let me know.

[Sakin]

ok then edit my precious css to the following:

.pro-button a {
    background-color: #28b3c5;
    border: 2px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
}
.pro-button a:hover {
    background-color: #28b3c5;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) inset;
    text-decoration: none;
}

[Debbie]

Perfect! Thank you!! 🙂 🙂 🙂

[Sakin]

@Debbie: Thanks for your appreciation 🙂

[Author]

Posts