WordPress.org

Ready to get started?Download WordPress

Forums

Shortcodes Ultimate
How to style the button text? (8 posts)

  1. valnet
    Member
    Posted 3 years ago #

    Is there a way to change the style of the button text? It's all CAPS and there's no control over it. I tried using a <span style=""> tag, but it doesn't work.

  2. Vladimir Anokhin
    Member
    Plugin Author

    Posted 3 years ago #

    Upgrade to 2.5.5 and try this custom CSS

    .su-button span {
    	text-transform: none !important;
    }
  3. valnet
    Member
    Posted 3 years ago #

    I deactivated the older version, uploaded the version 2.5.5 files, reactivateed the plugin and added the CSS. Works great!

    So, I added the span CSS to the customer CSS:
    .su-button span {
    text-transform: none !important;
    padding: none;
    font-family: Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight:bold;
    text-align:center;
    background-color: transparent;
    }

    BUT ... the padding around the button text seems to be controlled elsewhere in the CSS as there is a light-colored background surrounding the button text. I would love to get rid of this and greatly reduce the padding-left and padding-right.

    I also thought about making a separate <div> for the button text, but somehow that seems wrong.

    Here is the button shortcode:
    [button link="#" color="#0052A4" size="3" style="2"]<span class="su-button">Email the Librarian</span>[/button]

    See the web page here: Cherryvale Library

  4. valnet
    Member
    Posted 3 years ago #

    I also like to use PHPEnkoder to encode email addresses and I'm not sure how to make that work with your plugin. If you have any thoughts or suggestions, that would be great.

  5. Vladimir Anokhin
    Member
    Plugin Author

    Posted 3 years ago #

    Shortcode:
    [button link="#" color="#0052A4" size="3" style="2"] <span class="su-button-inner">Email the Librarian</span> [/button]

    Custom CSS:

    .su-button span {
       text-transform: none !important;
    }
    .su-button span.su-button-inner {
       padding: none;
       font-family: Calibri, Arial, sans-serif;
       font-weight:bold;
       margin: 0 20px;
       background: none;
    }

    Unfortunately, I don't know anything about the PHPEnkoder...

  6. valnet
    Member
    Posted 3 years ago #

    This works perfectly and looks beautiful ---

    [enkode][button link="mailto:#" color="#0052A4" size="3" style="2"]<span class="su-button-inner">Email the Librarian</span>[/button][/enkode]

    The only issue seems to be that I cannot override the 20px left-right margin. (I'll continue to experiment with this a little.)

    (PHPEnkoder) is a plugin with shortcode to encrypt any HTML and is very effective to prevent to email or link harvesting.)

  7. valnet
    Member
    Posted 3 years ago #

    Is there a way to fix the width of buttons they are the same width in a column?

  8. itsbarry
    Member
    Posted 2 years ago #

    valnet this is how I made full-width buttons:

    .su-button span {
    	padding:12px 0 !important;
    	text-align:center;
    }
    .su-button {
    	width:100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic