Mega Web Buttons Pack #1

Today we want to share our first set of easy-to-implement buttons called ‘Mega Web Buttons Pack’. In this set you will find 42 buttons which you can use easily on your website. We are using the WooFunction icon set released under the GNU General Public License. Our first step is to add […]


View demoDownload source

Today we want to share our first set of easy-to-implement buttons called ‘Mega Web Buttons Pack’. In this set you will find 42 buttons which you can use easily on your website. We are using the WooFunction icon set released under the GNU General Public License.

Our first step is to add the following line of jQuery:

$('.btn').append($('<span />').addClass('helper'));

This means that we will create a new ‘span’ element which is the holder for the button icon.

If, for example, you want to add the ‘Chart’ button you need to add markup to your website:

<a href="#" class="btn chart">Chart</a>

or the ‘Search’ button:

<a href="#" class="btn search">Search</a>

In the CSS you can change the looks by, for example, changing the background color:

.btn.green {
    background:#2DA10C;
}

and markup will be:

Search

etc. :)

We hope you like our experiment. Let us know which icon set you would like to see wrapped up like this in the future.

Previous:
Next:

Tagged with:

Marcin is an experienced and creative web developer from Poland. He loves putting new ideas into practice and is addicted to jQuery and CSS. Read his blog about web development here: http://www.jscraft.net.

View all contributions by

Website: http://playground.mobily.pl/

Related Articles

Feedback 45

Comments are closed.
  1. 3

    Great collection of buttons. Some really nice ones here that I might have to use in my designs. Thanks!

Comments are closed.