Drag & Drop Buttons In Weebly
May 4, 2012 Tags: buttons, Drag & Drop
Category: Articles, Elements & Features 15 Comments 
Four Button Styles Available for Drag & Drop in Weebly
The new Button Element in Weebly lets you drag & drop buttons to any where on your Weebly Site. Buttons greatly enhance usability. Add Buttons at places where you want your users to take action. Don’t forget, you can add buttons to side bars as well. If you have used the Flexible Footer or the Top Bar, you can drag & drop buttons there as well. Note that the Header, Footer and the Side Bar play a key role in grabbing your visitor’s attention. Remember to use buttons. There are four styles of buttons available currently, two small and two big.
Drag & Drop Buttons to flexible content areas to show them across all pages
Apart from choosing any one of the four styles, you have the option to link it to a page and also align it. Button Element can be found under “Elements –> More”
The addition of Button Element to Weebly is a small but important update. Hopefully, Weebly brings in the Table Element too. Keeping fingers crossed.
Just caught site of this new feature when I checked in to my site for some quick editing. Wow! Nice! Thanks for another cool feature Weebly Wizards!
wow, I had always used buttons I created off of cooltext, but now that there is inline elements, it makes it a lot easier.
Just starting to use the ‘button’ link but after dragging it to a position, I can’t seem to edit the button text
Some times the button seem to get hung. Try closing the page and open it again to edit. That should fix it for the time being.
How would I use the buttons in a custom html
function myFunction()
{
alert(“No dates available”);
}
How do i delete a button though? I can’t seem to get rid of it after dropping it
You should be able to delete the element. Mouse over and click the red x in top right corner, and publish it. If you have already done that, your browser may have cached the page. Give it some time and you should see it refreshed. You can try to clear the cache and check as well.
This tool does not appear in the iPage weebly editor… Any ideas?
If you do not see the drag-and-drop button element in iPage version of Weebly, iPage may not have had the update yet. The Button element is four months old. It seems strange they don’t have such an important element yet.
But first, check all items in “Elements”. Some times, it did not show in the first set. It must have been hidden some where in “More” or “Multimedia” etc.
Send an email to support@weebly.com and see if they can confirm either way (if iPage supports the Button element).
Ideally, iPage should have an answer. If not, move over to hosting directly at Weebly. If iPage can’t get an update four months after its release, it will continue to haunt you with future updates as well.
Please keep us posted. If nothing works, I will revamp the custom css button topic and suggest alternate & better ways of getting the buttons on to your site.
I’ve opened an online ticket with iPage support asking them why the additional support is not there. In the mean time and per my post under the “other” topic. The following is my CSS code and the code posted in the Custom HTML, note that both were copied from CSSButtonGenerator, and idea’s or suggestions are appreciated.
CSS…
.TestButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ededed’, endColorstr=’#dfdfdf’);
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #000000;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.TestButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dfdfdf’, endColorstr=’#ededed’);
background-color:#dfdfdf;
}.TestButton:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
HTML
This is a Test
let me try the HTML again… replaced with []
[a href="#" class="TestButton">This is a Test</a]
Please use the forums if discussing code. In forums, you will be able to paste code as is. Highlight the code and select {} icon to mark it as code.
Hi,
I have not published the site above yet (I am a first time user). How can I test the buttons, to ensure that they link to the correct place? Before I discovered the button element, I made text links and they worked immediately. I created and linked buttons, but when I click on the button, I do not get any response.
Thanks,
Jane
OK a real dumb question as i fiddle with this new object called BUTTON on the weebly site editor and dragged it onto my web page.
I thought I could just quickly figure out what it is and use it just by looking at its parameters – if not i could just delete it. Well 1) the button has no parameters to edit, and 2) I cannot for the life of my figure out how to delete this darn button off my webpage! Its on the editor page but thankfully on displayed on the published site.
But…. how do i delete this BUTTON that i dragged onto my page?
Some one else complained the same issue.
The drag-and-drop button is supposed to work just as you described, simple enough to choose a style, link, enter text. All you need to do is to mouse over the button and the options would appear. Apparently, its not working for some people. Contact Weebly Support and see if they find out what is going on.
May be try a different browser (Chrome/FireFox/Safari) and see if the site editor works there.