WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] How do I make a link look like a button?

[Resolved] How do I make a link look like a button?

  • eblanch
    Member

    @eblanch

    I have some links at the top of a page that look very unprofessional. How can I make them into a button or something that makes them stand out more?

    Thanks,

    Eric

Viewing 15 replies - 1 through 15 (of 27 total)
  • elfin
    Participant

    @elfin

    eblanch
    Member

    @eblanch

    Thanks for the list of possibilities. I am a little confused because I can’t seem to use CSS in the editor. I am trying to place the buttons inside a single page and it seems I can only use html in those editors. Is that correct? How do I use CSS in that situation?

    Thanks,

    Eric

    eblanch
    Member

    @eblanch

    Actually, let me change that question. I put the text in the page editor in html and then link it to the CSS in the style.css, right? Which section would I place that information in the style.css? I have tried in a few and it doesn’t seem to work correctly.

    Eric

    Can you clarify where you’re placing this button code please.

    Are you writing the code in the editor at Admin > Pages > Add New or Admin > Pages > Edit, or are you referring to editting a theme file via the theme editor.

    Would it be possible to see the code you’re placing into whichever editor you’re using, and the CSS you’re adding to the stylesheet to work alongside the code please.

    eblanch
    Member

    @eblanch

    Admin > Pages > Edit

    I am using the code from this website

    http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

    I have put the images in the media and placed the html in the Admin>Pages>Edit editor and then the CSS in the style.css in the *posts* section, I can’t seem to link the css to the media.

    Ok, i understand what you’re trying to do… 🙂

    Is the site you’re doing this on the one in your profile? because i can’t see the CSS needed for the buttons in your stylesheet.

    eblanch
    Member

    @eblanch

    http://www.blanchardtrombone.com

    I am on the valsalva>recovery page

    It is the last few entries under the *posts* category just above the *Navigation* section in the style.css

    I see the button HTML on your page..

    However aside from that, as i stated before, your stylesheet does not contain the CSS styling..

    Your stylesheet is here.
    http://www.blanchardtrombone.com/wp-content/themes/multi-color/style.css

    Which is missing the required CSS from the sliding doors article.. eg.

    a.button {
        /* Sliding right image */
        background: transparent url('button_right.png') no-repeat scroll top right;
    display: block;
    float: left;
    height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
    margin-right: 6px;
    padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    }
    a.button span {
    /* Background left image */
    background: transparent url('button_left.png') no-repeat;
    display: block;
    line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
    padding: 7px 0 5px 18px;
    }
    a.button:hover span{
    text-decoration:underline;
    }

    The next step would be to place that code into your theme’s style.css. If you’re having trouble doing that part, just let me know where you’re having problems and i’ll do what i can to explain.. 😉

    eblanch
    Member

    @eblanch

    It’s there! Did I just place it in the wrong section? What you have pasted above is all in the stylesheet you linked above.

    Which section of th style.css should this code be entered. I placed it in the /*Posts*/ section at the bottom just before the /*Navigation*/ section.

    Thanks,

    Eric

    Ah hah!, now it looks different.. are you sure you didn’t just sneak those additions in… hehe..

    Have you uploaded the required images also? If so, where are they located, currently the stylesheet expects them to be in the same folder as the stylesheet is (if they are in an images folder for example the CSS will need to be updated to reflect that).

    EDIT: Eric, i’m off to bed very soon, so if you don’t hear from me immediately after your next response it’s because i’m getting my beauty sleep.. 😉

    eblanch
    Member

    @eblanch

    I got the buttons to work, but now I don’t know how to space them so they look normal. I would like them in one row at the top of the page. It would be nice to have them off to the side of the post title. Where would I place code for that? Is it in the header?

    http://www.blanchardtrombone.com/?page_id=60

    Thanks,

    Eric

    Hi Eric,

    Your page shows a line break between each of the buttons, is there a newline between them when viewing the code/links in the editor? If you’re placing the links each on their own line WordPress will treat them like new lines, adding line breaks between each one (fixed by placing them on the same line, or placing them inside an another element, for example a div element).

    I also believe your CSS needs a little tweak.. (buttons don’t quite look right).

    Update your button CSS to the following (i’ve simply modified a few bits for you)

    a.button {
    	background: transparent url('http://www.blanchardtrombone.com/wp-content/uploads/2010/08/button_right_06.png') no-repeat scroll top right;
    	display: block;
    	float: left;
    	height: 34px;
    	margin-right: 6px;
    	padding: 0 20px 0 0;
    	text-decoration: none;
    	color: #000000;
    	font-weight: bold;
    	font-size: 12px;
    }
    
    a.button span {
    	background: transparent url('http://www.blanchardtrombone.com/wp-content/uploads/2010/08/button_left_06.png') no-repeat;
    	display: block;
    	line-height: 34px;
    	height: 34px;
    	padding: 0 0 0 18px;
    }
    
    a.button:hover span {
    	text-decoration:underline;
    }

    There’s also the problem of positioning, if you want to move them near the title you’ll need to move the button code into the theme, and out of the editor. I personally think they look fine in a line under the title, there’s just a few CSS tweaks that need to be made to tidy up how they look.

    If you’re happy to keep them where they are, then in addition to the CSS changes above you should add an element after the buttons that clears the floats (if you don’t know what this means don’t worry), which is a simple matter of placing something like the following after your button code (ie. what you’re putting into the editor).

    <div style="clear:both"></div>

    Which will essentially stop the paragraphs that follow from try to wrap around your buttons.. 🙂

    Your buttons should then look like so..
    http://img840.imageshack.us/img840/32/buttonsq.jpg

    Let me know how you want to proceed though… 🙂

    eblanch
    Member

    @eblanch

    Thanks for the help with this project. I changed all of the CSS in the style editor and did everything else I think I need to do. There is a slight problem with the right side of the buttons. The bottom of the right picture is not showing up. Do you know what is causing that?

    http://www.blanchardtrombone.com/?page_id=60

    Thanks for all of your help!!!

    Eric

    Hi,

    No problem, you’re welcome. In regard to the missing part of the image, that’s because you’ve missed the height change on the button class.. 😉

    Set to 34px instead of 32px, and it should fix the problem… 🙂

    eblanch
    Member

    @eblanch

    That’s it!! Thanks again. I am trying to decide if I want to venture further and color code pages and layers of pages. Is it hard to add that to the CSS. I understand the time of uploading all the different colors of pics, etc., but I wonder how much it would take to add that to the style sheet. I am guessing I would have to set up a, b, c, etc. Is that correct?

    sorry! I a quite a beginner and the more I do the easier it is to want more and better stuff!

    Thanks,

    Eric

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘[Resolved] How do I make a link look like a button?’ is closed to new replies.