logo

Vytvářejte tlačítka ve stylu GitHub pomocí CSS a jQuery, MooTools nebo JavaScriptu Dojo

Jsem to, co byste považovali za trochu fanboye GitHubu. Všichni víme, že GitHub je perfektní místo pro ukládání úložišť otevřeného zdrojového kódu, ale myslím, že moje láska ke GitHubu jde ještě dál. Zdá se, že GitHub chápe, že většina repo webů je obvykle nudná, takže svůj web okořenil chytlavými CSS a skvělými funkcemi JavaScriptu. Jeden malý kousek designu GitHubu, který miluji, jsou základní tlačítka. Pojďme se podívat, jak můžeme vytvořit vlastní tlačítka ve stylu GitHubu s trochou HTML, CSS a JavaScriptu.

Zobrazit ukázku

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>

Níže jsou uvedeny dva styly tlačítek:jedno základní tlačítko a jedno s ikonou nalevo od textu.

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

CSS je bohaté, ale obvykle to tak je, když se snažíte dosáhnout dokonalosti. A stejně jako většina tlačítek je tlačítko GitHub prvkem A s řadou prvků SPAN uvnitř. Také si všimnete, že je potřeba více kódu CSS, aby se tlačítko přizpůsobilo...samozřejmě.

MooTools, Dojo nebo 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 to udělá správně tím, že vytvoří pouze část JavaScriptu slouží jako vylepšení pro ostření tlačítkem/dolů myší. Tento JavaScript není vyžadován.

Zobrazit ukázku

Nakonec je množství CSS a JavaScriptu pravděpodobně více, než byste si mysleli, ale výsledek je opravdu hladký. Neváhejte a vyjádřete svou lásku ke GitHubu níže.