Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 28, 2015 at 7:44 pm #78679
    Debbie
    Participant

    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?

    October 28, 2015 at 11:45 pm #78703
    Sakin
    Keymaster

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

    October 29, 2015 at 1:27 am #78706
    Debbie
    Participant

    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?

    October 29, 2015 at 8:37 am #78722
    Debbie
    Participant

    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

    October 30, 2015 at 12:17 am #78765
    Sakin
    Keymaster

    @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;
}
    October 30, 2015 at 4:10 am #78776
    Debbie
    Participant

    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.

    October 30, 2015 at 7:41 am #78793
    Sakin
    Keymaster

    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;
}
    October 30, 2015 at 8:29 pm #78821
    Debbie
    Participant

    Perfect! Thank you!! 🙂 🙂 🙂

    October 31, 2015 at 12:53 pm #78868
    Sakin
    Keymaster

    @Debbie: Thanks for your appreciation 🙂

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Is there a button class for the Promotion button?’ is closed to new replies.