GitHub-Style的按钮 ,基于CSS and MooTools , jQuery

我们都知道,GitHub是一个管理开源代码库的好地方,并且提供了非常有利于用户体验的web界面,使我们使用起来是如此的简单。 然而那么好的交互效果,当然离不开 CSS 和 JavaScript。
就像GitHub中的那些基本按钮,也是我喜欢的。接下来,我们可以尝试一下使用HTML ,CSS 和 JavaScript做一个属于自己的GitHub风格的按钮。

GitHub-Style-Buttons

 

View Demo »

 

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');
		}
	});
});

 

View Demo »

 

作者:David Walsh

文章来源:Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

站点统计