O'Reilly

Create an Animated Sliding Button Using MooTools

By on  
MooTools Sliding Button

Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a Tympanus post which provided a great method for making button have an unexpected pop. Here's a quick tutorial on how to duplicate that look using MooTools.

The HTML





The system works off of one DIV, two As and SPAN elements. Note the IDs and CSS classes for the CSS.

The CSS

.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px; }
.button_aLeft{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; right:0px; position:absolute; line-height:36px; text-align:left; }
.button_aLeft span{ /* display:none; */ visibility:hidden; padding-left:20px; color:#fff; }
.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right; }
.button_aRight span{ /* display:none; */ visibility:hidden; padding-right:20px; color:#fff; }

.button_bLeft{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; right:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }
.button_bLeft span{ color:#008ddd; }
.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }
.button_bRight span{ color:#008ddd; }

.button_c{ background-color:#008ddd; color:#fff; text-transform:uppercase; }
.button_c span{ color:#093d6f; }

The CSS code above mirrors the original code with the exception that "display:none;" was changed to "visibility:hidden", per the differences in MooTools and jQuery fading methodology. Feel free to modify the basic color/formatting styles in any way you'd like.

The MooTools JavaScript

window.addEvent('domready',function() {
	$$('.slidebttn').each(function(btn) {
		var prev = btn.getPrevious('a').set('tween',{ duration: 200 });
		var span = prev.getElement('span');
		btn.addEvents({
			mouseenter: function(e) { 
				btn.addClass('button_c');
				prev.tween('width',225);
				span.fade('in');
			},
			mouseleave:function(e) {
				btn.removeClass('button_c');
				prev.tween('width',70);
				span.fade('out');
			}
		});
	});
});

The first step is grabbing all button containers and identifying the SPAN and A elements within them. Then we add mouseenter and mouseleave events to the container which do the animation of the primary A/SPAN elements.

Great work by Tympanus. The effect is classy and well executed. Now go and use this on your next project!

Track.js Error Reporting

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

  • MooTools HTML Police: dwMarkupMarine

    We've all inherited rubbish websites from webmasters that couldn't master valid HTML. You know the horrid markup: paragraph tags with align attributes and body tags with background attributes. It's almost a sin what they do. That's where dwMarkupMarine comes in....

Discussion

  1. Very good, Mr Walsh.

  2. I like this, but I think it comes with a very slight usability issue – when I hovered over and the “Use Twitter account” text popped out, I tried a couple of times to move over and click it like it was offering an alternative sign-in method. Could be a teeny bit frustrating for an impatient user thinking they’re just slipping off the button when it shoots back in.

  3. adlib

    this one doesn’t work very well with opera…

  4. derdummkopf

    sorry for this stupid question, i’am a newbe
    but how looks the function if i have only one button
    $$('.slidebttn').each(function(btn) {...

    i think each is then not necessary or?

  5. I like. However, IE not allowing border-radius kinda kills the effect. Looks much better in firefox or chrome.

  6. @derdummkopf: How would you accomplish this without each? The only way I can see of doing so would repeat walks through the DOM to get the previous items.

    @John: It may be something where you don’t show IE users this effect.

  7. Nice little dilly hoper here David.

    @derdummkopf
    you could just take the function from within .each() and name it. then pass it a single mootooled element $("one_element_ID").

    function makeSlideBTN(btn) {
    	var prev = btn.getPrevious('a').set('tween',{ duration: 200 });
    	var span = prev.getElement('span');
    	btn.addEvents({
    		mouseenter: function(e) { 
    			btn.addClass('button_c');
    			prev.tween('width',225);
    			span.fade('in');
    		},
    		mouseleave:function(e) {
    			btn.removeClass('button_c');
    			prev.tween('width',70);
    			span.fade('out');
    		}
    	});
    }
    
    window.addEvent("domready",function(){
         //make an element slide
         makeSlide($("whattever-ID"))
    })
    
    

    Remember to keep the classname or it’ll not have any style

  8. That is a really neat user interface object, I am sure clients will understand what you want from them when buttons start opening and closing for them.

  9. Insane :) Hehe.. have to love it..

    Great for exercise … Soon to be implemented on my secret project :D

  10. Hi,

    Nice work,

    Can u please say what the below line will do in above code.

    var prev = btn.getPrevious(‘a’).set(‘tween’,{ duration: 200 });

    Specially getPrevious function

  11. ethan

    how can i make it work with master/content pages?

  12. Verry nice and simple! With a little customization it fits perfect on my site! Thanx.

  13. Joe

    How do I add a link to these? I tried but keep failing :(

  14. Joe

    How do I add a link to this button?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...