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 monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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 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/

Receive our bi-weekly Collective or official newsletter right in your inbox.

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. @PeterV

    I know that it is exactly the same as in DOM.

    Obviously, it’s your opinion, you can say that a little javascript is unneccessary. But you have to admit that it is the fastest way to create nice set of buttons.

    By the way, show me these readers who have javascript turned off nowadays πŸ™‚

  2. Hello, and thank you Marcin for sharing. Could you possibly point a noob!! to the correct .css location to change the button hyperlink colour, as the text shows in lime green when I add my hrefs
    thanks again
    Mike

  3. I just noticed that it is only in i.e. that it shows a lime text – is there a work around please
    cheers, thanks again
    Mike

  4. Awesome buttons!
    I would like to use them on my wordpress blog. In which file should I put the JQuery code?

    thnx

  5. I don’t like the implementation.
    First: JavaScript to make this work? Come on…
    Second: Limited to anchor Tags. Come on…

    Start using :before and :after, because in many cases its necessary to use input of type button to make a button – not an anchor.

    • Hi Christian,
      that’s your opinion and while it’s probably a very spread idea that it’s shameful to use JS for this, I do believe that we can take the step to use JS. In many projects where it’s absolutely out of question to make anything work without JS, this is a nice “shortcode”.
      I don’t know about which cases you are actually talking about where the use of an input type button is necessary nowadays (I *never* encountered that necessity).
      And, “come on”, this is done so clean and simple, you can change it to anything you want.
      Cheers, ML

  6. Very clean and simple… I don’t mind the javascript at all. I’ll store this one away in my resources folder. Thanks.

  7. We all can not be the same. There may be different ways to do something. Choose the path that you think is comfortable for you to work with. I just love it. And thanks for sharing it with the community

  8. Very cool buttons, I have a time ago that I don’t access to your website, always have good news, thanks

  9. What is the purpose of the class helper?
    It is not defined in the css and a quick test shows that it is not needed.
    Try using:

    $(function(){

    $(‘.btn’).append($(”));

    });
    and it works just fine.

  10. Thanks. But…
    What about “rtl” languages? Can I use them or should I edit with Image Editor to flip pictures to right side?

  11. Thanks for sharing a great collection of buttons. Your chosen icons work beautifully and each button is perfectly presented. My only criticism, if any, would be to add an active state, this said the buttons do work perfectly well without! Thanks again.