WordPress.org

Support

Support » Plugins and Hacks » Shortcodes Ultimate » How to style the button text?

How to style the button text?

  • 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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Vladimir Anokhin

    @gn_themes

    Upgrade to 2.5.5 and try this custom CSS

    .su-button span {
    	text-transform: none !important;
    }

    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

    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.

    Plugin Author Vladimir Anokhin

    @gn_themes

    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…

    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.)

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

    valnet this is how I made full-width buttons:

    .su-button span {
    	padding:12px 0 !important;
    	text-align:center;
    }
    .su-button {
    	width:100%;
    }
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to style the button text?’ is closed to new replies.
Skip to toolbar