mootools_使用CSS和jQuery，MooTools或Dojo JavaScript创建GitHub样式的按钮

mootools

I'm what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most repo sites are usually boring so they've spiced their site up with some catchy CSS and great JavaScript features. One tiny piece of the GitHub design I love are the basic buttons. Lets examine how we can create our own GitHub-style buttons with a bit of HTML, CSS, and JavaScript.

我是您可能会觉得有点GitHub迷的人。 众所周知，GitHub是存储开放源代码存储库的理想场所，但我认为我对GitHub的热爱超出了此范围。 GitHub似乎了解大多数回购网站通常很无聊，因此他们使用一些吸引人CSS和出色JavaScript功能为其网站增添了趣味性。 我喜欢的GitHub设计中的一小部分是基本按钮。 让我们检查一下如何使用一些HTML，CSS和JavaScript创建自己的GitHub样式的按钮。

View Demo 观看演示

HTML (The HTML)

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

Below are two styles of buttons: one basic button and one with an icon to the left of the text.

下面是两种样式的按钮：一种是基本按钮，另一种是在文本左侧带有图标的按钮。

CSS (The CSS)

	/* 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 CSS is bountiful but it usually is when trying to achieve perfection. And just like most buttons, the GitHub button is an A element with a series of SPAN elements inside of it. You'll also note more CSS code is needed to accommodate for the button...obviously.

CSS很有用，但通常是在尝试达到完美时。 就像大多数按钮一样，GitHub按钮是一个A元素，其中包含一系列SPAN元素。 您还将注意到，显然需要更多CSS代码来容纳按钮。

MooTools，Dojo或jQuery JavaScript (The MooTools, Dojo, or jQuery JavaScript)

/* MooTools (FTW) */
window.addEvent('domready',function() {
	$$('a.minibutton').addEvents({
		mousedown: function() {
			this.addClass('mousedown');
		},
		blur: function() {
			this.removeClass('mousedown');
		},
		mouseup: function() {
			this.removeClass('mousedown');
		}
	});
});

/* Dojo Toolkit */
dojo.addOnLoad(function() {
	var buttons = dojo.query('a.minibutton');
	buttons.connect('onmousedown',function() { dojo.addClass(this,'mousedown'); });
	buttons.connect('onblur',function() { dojo.removeClass(this,'mousedown'); });
	buttons.connect('onmouseup',function() { dojo.removeClass(this,'mousedown'); });
});

/* jQuery */
jQuery.ready(function() {
	jQuery('a.minibutton').bind({
		mousedown: function() {
			jQuery(this).addClass('mousedown');
		},
		blur: function() {
			jQuery(this).removeClass('mousedown');
		},
		mouseup: function() {
			jQuery(this).removeClass('mousedown');
		}
	});
});

GitHub gets it right by making the JavaScript portion only serve as an enhancement for button focus/mousedown. This JavaScript is not required.

GitHub通过使JavaScript部分仅用作按钮焦点/鼠标向下的增强来实现正确。 不需要此JavaScript。

View Demo 观看演示

In the end, the amount of CSS and JavaScript used is probably more than you would have thought but the result is really smooth. Feel free to profess your own love for GitHub below.

最后，使用CSS和JavaScript数量可能比您想象的要多，但结果确实很顺利。 随意声明您对以下GitHub的热爱。

翻译自: https://davidwalsh.name/github-css

mootools