How to Create Buttons in Weebly

[Update: New Drag & Drop Button Element in Weebly is introduced in May, 2012. You will see this as ok button element in Weebly Editor, but you can add any text to it. Click here for more information]

You can create buttons for your Weebly Site to give a better experience to your visitors. Buttons are more effective than text links. There is no built-in drag and drop element for buttons. You need to add a style to the CSS and use Custom-Html element. Check TeluguMahal.com for an example of button usage. The buttons on the left are using the stlye sheet. The ones on the right are picture elements linking to pages. Picture elements take up space and require more data to be downloaded, impacting the download speed.  Create your buttons at http://www.cssbuttongenerator.com

Weebly Buttons

Pick your choice of colours and style of buttons

You will be able to create your own style of borders, colour fill etc. Get the CSS code generated at paste it in your CSS. Now simply add a custom-html with the style <a href =”http://www.weeblyforums.com” class=”myButton”> California </a> . You can create any number of button styles and add them to your CSS. Link the button to any destination. The “>” to the right of the button is just part of the text “California >”. You can use “>>” or “–>” to make it more intuitive that there is more information.

There is an advanced version of button creator for specific needs. http://www.cssbuttoncreator.com/  can generate different types of buttons.




Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Yes. If you added the CSS code and the custom-html, it should appear in your editor. 'Publish' it and your live site will be updated. If you do not see it in your editor, you are missing some thing.

  2. Once I copy the CSS button code into my HTLM drag and drop element only the css code will be displayed (regardless once puplished) Seems only to work with java script.
    Any ideas?
    Do I have to copy the CSS code into the Footer/Header Code section of my page first?
    Regards
    Michael

    • The CSS code need to be added to "main-style.css" which can be accessed through Design -> Edit HTML/CSS. And then, in the site editor, use the custom-html element to add the "<a href" part. Don't add any thing to footer/header code.

  3. Okay I found the HTLM/CSS Editor section under Design in weebly so added the CSS code into it and pasted the
    <a href="#" class="myButton">my button</a> into my HTLM drang and drop element.
    My button is displaying now fine but how do I add a link? Default link settings seem to point only to my home page.
    Thanks
    Michael

  4. Thank you so much for your great help!!! Very much appreciated!
    One thing seems to be troubling: All buttons are nicely designed and appear exactly as intended in editor mode but once puplished the color of the font changes from e.g. white to a plae red (I have a red background).
    Any ideas/experience on that?
    Again thanks for your great help!
    http://www.michaelnau.net

    • Right now, its picking the colour of set for the link. There are other ways for buttons. But that has compatibility issues across browsers. Trying a couple of things to check if they work for all browsers. Will keep you posted. Some things need to be fixed by Weebly to make these work across the new browsers.

  5. how do you like the button to the page in side you web site. do you have to type in the extension Manually? what does it look like ( http;/??????.weebly.com/?????.html

    • I didn't get your question. Please check back after a couple of days. I will expand this topic and provide step by step detail for the benefit of those who are not familiar with css/html stuff.

    • Sorry did that from my phone. how do you link the button to the pages inside the website. <a href="#" class="myButton">Directions</a>. I believe i put my page extension in the # spot. But what is the page extension. I have pages made and want to link them to the buttons but i don't know how to do that.

      thanks

  6. I have made a custom button using Super conversion button. It gave me a code to paste into my website.
    I like to use it in place of the submit button on my contact form. Can anyone tell me where do i paste it this code ? Do i need to delete anything from the CCS code ?

    • Weebly has not yet released themes with the built-in Search functionality. For now, you have to use some thing like Google Custom Search http://www.google.com/cse/

      Get the code it generates based on your configuration. Place a custom-html element in pages and add this Google CSE code. Its a little laborious way. Once Weebly releases the new themes, they should be coming with built-in Search function, which would make it all smooth.

  7. Please disregard my last comment. I used the CSS generator you suggested, instead of the original I was using, and it worked perfectly.

  8. Thank you for this tip – it’s been a great help however I am having a problem with sizing. Each time I change the text for button it resizes. I would like to have a button that is 200 wide and stays that way no matter how short the text. Any advice would be much appreciated

  9. I have made the button, however,
    1. it is not showing the right colour, while making it is red, on the page it turns grey.
    and
    2. I am not able to direct it to the page
    i used Join Us
    but it shows error 404.
    how do I find the url to the contact / other pages?

    • If you click on the contact page, your url gets displayed in the address bar. For your contact page, it is humaniti.weebly.com/contact-us.html

  10. What am i doing wrong, i have done everything. Only Link appears not button. I’ve added it to CSS but still nothing. Can you help me? Or can you do a Video tutorial about this.

    Thank you.

  11. I would like to have a button that is for language changes; a flag of France for French, a Jordanian flag for Arabic and so forth. I can’t seem to figure out how to make a picture button with CSS Button Generator.

    Can anyone please help me with this?
    Thank you very much
    Mo.

  12. I would like to put an online application form on our site for prospective teachers to fill out and submit. The application is rather long and I’d like to do it in two parts – first page for general info, second page for more “fill in” essay info.

    Instead of having a “submit” button at the bottom of the first page I want it to say “next” and take the applicant to the second page so they can continue to complete the application and finally “submit” all the information from both pages.

    Is this possible and if so, what code do I need to use for the button at the bottom of page 1?

    Thanks in advance :)

    • Yes and No. You can accomplish this, but the only problem with it is that you can not get the details of “form 1″ and “form 2″ together. If you use Weebly, each form will be submitted independently. It does not merge the data from the two forms. You are going to see them as two separate forms and there is no way to connect them automatically.

      Your best bet is to use third party solutions like Google Docs etc.

  13. I already read all the comments but i still don’t get it, a paste de ccs code on my main css, then i grab a custom html and put it on my page, then put th <href, i got the link but no button any idea?

    • Weebly drag and drop buttons are not in my tool. I’m using the premium version of Weebly through iPage. Support at iPage seems to have no clue about this button tool.

      I’ve also tried the custom CSS code per the “how to” in this thread and am having the same problem as many including Paulcardo. I can see the button in preview mode from the Edit CSS HTML feature, but once I publish I see only the button text but in the weebly default font color. There are absolutely no characteristics per the CSS and how I see it in the preview.

      I’m quickly losing my patience with Weebly. Everything is a hunt, try, guess, try again, cross your fingers, kiss the dog, and hope it works.