Re-creating button appearance with inline CSS

  • Unknown's avatar
    gregwalkerusa · Member ·

    Hi – I am using the Publication Theme made by WordPress. I would like to re-create the look and behavior of that theme’s contact form submission button for a custom link of my own using inline CSS.

    I’ve tried a variety of different methods thus far, but WordPress.com’s limitations are making that difficult (the <form> tag isn’t allowed, hover attributes can’t be defined inline, etc.)

    I would like to create a regular old <a> link that looks and behaves (hover attributes, etc.) exactly like the “Submit” button on my site’s contact form. Any suggestions?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jameswelbes · Member ·

    Hi Greg!

    Do you have a premium account? I don’t believe inline CSS works with WordPress.

    With a Premium account you can add custom CSS to your stylesheet.

    If you do have premium, try this:

    the HTML of your button:
    <button>Custom Link</button>

    the CSS to add: 

    body > button {
    background: #377FEB;
    color: #fff;
    font-size: 20px;
    height: 60px;
    width: 150px;
    line-height: 60px;
    margin: 25px 25px;
    text-align: center;
    border: 0;
    transition: all 0.3s ease 0s;

button:hover {
  background: #222;
}

    Give that a shot and let me know how it works for you

  • Unknown's avatar
    jameswelbes · Member ·

    I should note, that I have no idea if the <button> tag will stick. I know that when I switch from the “Text” tab to the “Visual” tab, it completely messes up my HTML. So, if you do this, you may have to use the Text tab and never switch to the visual tab (that’s what I do to make sure my code doesn’t get messed with)

  • Unknown's avatar
    gregwalkerusa · Member ·

    Thanks for replying!

    Yeah, I tried the button method. The HTML isn’t preserved when the page is previewed or published. The button tag is stripped from the text. I have no idea why WordPress doesn’t support the standard HTML code for buttons. Very odd. If I write:

    <button type="button">MegaLink</button>

    What I get on the actual page is:

    <p>MegaLink</p>

    I’ve also tried a [button] shortcode, but that doesn’t seem to work either.

    Inline CSS does seem to work – I was able to use it to get most of what I wanted (take a look at the ‘Make a Payment’ page if you’d like to see it in action), but I can’t get the hover to work because I don’t have WordPress Premium right now, and hover doesn’t appear to work with inline CSS in the standard.

    The irritating part is that regular links in this theme do have (nearly) the appropriate fading. I had hoped to find some way to use some inline CSS to extend that functionality via the CSS box model or something, maybe with the link as the background box and the text just floating above it in white. I’m not sure that would work, though.

    Any idea of how I might accomplish this using only inline CSS / without hover?

  • The topic ‘Re-creating button appearance with inline CSS’ is closed to new replies.