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 the following line […]
megawebbuttonspack1

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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.

Tagged with:

Marcin Dziewulski

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.

http://playground.mobily.pl/

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 45

Comments are closed.
  1. Fantastic collection! Just downloaded, already exploring. Just what I needed, thank you for making this available to us.

  2. You have a problem in buttons.css at line 59. You define .btn.address span with activity.png background.

    Very nice resource. Thank you!

  3. Super simple to use. thanks for this great.. Can I share it on my website? Of course I will share credits and link back to download to your article…

    awaiting your reply, you can email me too.

  4. Wow, great icons and really easy to use. Will def. try some time, thanks! πŸ™‚

  5. Very nice buttons> I used this technique before as well but my buttons were much smaller in height. Thank you!

  6. I agree with conufedone. All these buttons are styled with CSS adding the icon as a background image to a span. Why bother with the javascript when all you need do is add the span yourself?

    Nice buttons, just pointlessly implemented!

  7. @PeterV

    I don’t agree with you at all, it is just span element with an icon, but it is not pointless. You are adding new element (in our case span) dynamically and you don’t worry about adding this element in html markup.

    Do you like something like this:

    <a href="#" class="btn"><span>Button</span></a>

    I don’t think so πŸ™‚

  8. Marcin – Button is exactly what you end up with in your DOM. I honestly don’t see the point in loading unnecessary layers of javascript processing when all you need it a *little* extra HTML markup.

    Plus, should the reader have javascript turned off for whatever reason, the markup isn’t completed and so the icons aren’t rendered.

    Whilst I acknowledge that this is a neat way of adding icons to elements without having to include an IMG every single time, I do still stand by what I say – the javascript is unneccessary!

  9. Oops – didn’t realise the comment system would process the HTML! That reply should have started “Marcin – <a href=”#” class=”btn”><span>Button</span></a> is exactly what you end up with in your DOM”