299 Вы, случайно, не фанат GitHub? Что это? Это идеальное место для хранения архивов открытых исходных кодов, но на этом все прелести GitHub заканчивается. С точки зрения дизайна он скучен, но не в этом суть. Есть кое-что в GitHub, что заслуживает внимания — его кнопки.
Давайте попробуем сделать ваши собственные кнопки в стиле GitHub на HTML, CSS и JavaScript.
HTML
|
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> |
Выше представлены две кнопки с разными стилями: одна основная кнопка, другая с иконкой слева от текста.
CSS
|
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 36 37 38 39 40 41 42 43 44 45 46 |
/* 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;} |
Как вы уже поняли, как и большинство кнопок, GitHub кнопка представляет собой элемент A с набором SPAN элементов внутри. И конечно, для этого нужно больше CSS кода.
MooTools, Dojo и 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 36 37 |
/* 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'); } }); }); |
Из кода понятно, для чего нужен JavaScript. Все просто и легко.
В результате получилось CSS и JavaScript кода больше, чем обычно, но результат стоит того. Всем любителям GitHub посвящается...
