git

Создание GitHub кнопок на CSS и jQuery, MooTools или Dojo JavaScript

Вы, случайно, не фанат GitHub? Что это? Это идеальное место для хранения архивов открытых исходных кодов, но на этом все прелести GitHub заканчивается. С точки зрения дизайна он скучен, но не в этом суть. Есть кое-что в GitHub, что заслуживает внимания — его кнопки.

Давайте попробуем сделать ваши собственные кнопки в стиле GitHub на HTML, CSS и JavaScript.

Пример

HTML

Выше представлены две кнопки с разными стилями: одна основная кнопка, другая с иконкой слева от текста.

CSS

Как вы уже поняли, как и большинство кнопок, GitHub кнопка представляет собой элемент A с набором SPAN элементов внутри. И конечно, для этого нужно больше CSS кода.

MooTools, Dojo и jQuery JavaScript

Из кода понятно, для чего нужен JavaScript. Все просто и легко.

Пример

В результате получилось CSS и JavaScript кода больше, чем обычно, но результат стоит того. Всем любителям GitHub посвящается...


Оставить комментарий