GitHub-Style的按钮 ，基于CSS and MooTools , jQuery
我们都知道，GitHub是一个管理开源代码库的好地方，并且提供了非常有利于用户体验的web界面，使我们使用起来是如此的简单。 然而那么好的交互效果，当然离不开 CSS 和 JavaScript。
就像GitHub中的那些基本按钮，也是我喜欢的。接下来，我们可以尝试一下使用HTML ,CSS 和 JavaScript做一个属于自己的GitHub风格的按钮。
The HTML Code :
1 2 3 4 | <!-- button 1:"plain" --> <a href="javascript:;" class="minibutton"><span>Basic Button</span></a> <!-- button 2:"icon" --> <a href="javascript:;" class="minibutton btn-download"><span><span class="icon"></span>Button With Icon</span></a> |
The CSS Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | a{text-decoration: none;} /* button basics */ a.minibutton { display:inline-block; height:23px; padding:0 0 0 3px; font-size:11px; font-weight:bold; color:#333; text-shadow:1px 1px 0 #fff; background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat; white-space:nowrap; border:none; overflow:visible; cursor:pointer; text-decoration:none; } a.minibutton>span{display:block;height:23px;padding:0 10px 0 8px;line-height:23px;background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;} a.minibutton:hover, a.minibutton:focus {color:#fff;text-decoration:none;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);background-position:0 -30px;} a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;} a.minibutton.mousedown{background-position:0 -60px; } a.minibutton.mousedown>span{background-position:100% -60px; } /* with icon */ a.btn-download .icon {float:left;margin-left:-4px;width:18px;height:22px;background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat;} a.btn-download .icon {background-position:-40px 0;} a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-40px -25px;} |
The MooTools or jQuery JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* MooTools (FTW) */ window.addEvent('domready',function() { $$('a.minibutton').addEvents({ focus: function() { this.addClass('mousedown'); }, mousedown: function() { this.addClass('mousedown'); }, blur: function() { this.removeClass('mousedown'); }, mouseup: function() { this.removeClass('mousedown').blur(); } }); }); /* jQuery */ jQuery.ready(function() { jQuery('a.minibutton').bind({ focus: function() { jQuery(this).addClass('mousedown'); }, mousedown: function() { jQuery(this).addClass('mousedown'); }, blur: function() { jQuery(this).removeClass('mousedown'); }, mouseup: function() { jQuery(this).removeClass('mousedown'); } }); }); |
作者：David Walsh
文章来源：Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
文章评论 已经有 0 条评论！