• open panel

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.

 
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

34 Responses to “How to Create Buttons in Weebly”

  1. Should the button appear on my site right away?

     
    • The text appears but not the button, what am I doing wrong?

       
      • Mohsin
    • Try to choose a different color for button background, border. Make sure you do not select transparent background.

       
      • Raju Nunna
      • Raju Nunna
  2. 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.

     
    • Raju Nunna
    • Raju Nunna
    • Reply
  3. 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

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

       
      • Raju Nunna
      • Raju Nunna
  4. 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

     
    • Michael
    • Reply
    • Put your link in place of # in the href

       
      • Raju Nunna
      • Raju Nunna
  5. 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

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

       
      • Raju Nunna
      • Raju Nunna
  6. 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

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

       
      • Raju Nunna
      • Raju Nunna
    • 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

       
      • Ksee
    • Just replace the # with the URL. For example, if we want to point a page within our site, we would replace # with full URL of the page like http://weeblyforums.com/free-weebly-themes-and-templates/

       
      • Raju Nunna
      • Raju Nunna
  7. I have a question about linking the buttons. In the creation pages how do I find the URL to link the button to?

     
    • Domenic
    • Reply
  8. 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 ?

     
  9. How do I add a search button to search the matter within my web site.

    I have built a free weebly wb site.

    Thanks

    Rashmi

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

       
      • Raju Nunna
      • Raju Nunna
  10. Hey, I made the buttons on http://www.CSSbuttongenerator.com- But, I’m having troubles uploading them to the site. Can you help?

     
    • Please use the forums for community help.

       
      • Raju Nunna
      • Raju Nunna
  11. Hi,

    I was able to create the CSS buttons, and when I use this html, I can see the buttons, but I dont know how to make the link work: View E-book

    And when I use this html, the link works, but the button breaks: View Ebook

    Any thoughts?

    My page that this can be seen on is:
    http://www.styleclarity.com/new-page.html

    (at the bottom)

    Any thoughts on other html I might try?

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

     
    • biancachez
    • Reply
  13. 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

     
    • Al
    • Reply
  14. 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?

     
    • shobham
    • Reply
    • 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

       
      • Raju Nunna
      • Raju Nunna
  15. 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.

     
  16. Okay, right. I’ve done everything else, but button won’t appear, it’s not on transparent. Nothing.

    What to do!
    :’(

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

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

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

       
      • Raju Nunna
      • Raju Nunna
  19. 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?

     
    • Paulcardo
    • Reply
    • Weebly has drag and drop buttons now. Check the article about how to use the drag and drop buttons in Weebly.

      If the buttons that come with your site does not meet your need, here is a tutorial with 150 different buttons for Weebly. Once you load the buttons of your choice, you should be able to drag and drop them any where without the need of custom-html.

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

       
      • jiminsrq
      • jiminsrq
    • Let us track this in the Weebly Drag and Drop Buttons topic. Please check it over there.

       
      • Raju Nunna
      • Raju Nunna

Leave a Comment

Weeblyforums.com is neither affiliated with nor endorsed by Weebly
© 2013 Weebly Forums, a CrossWeb.ca venture

Facebook

Follow WeeblyForums on Facebook
%d bloggers like this: