Простые CSS3 кнопки в стиле Github! Главный трюк заключается в использованием свойства border-radius наряду с линейным градиентом из CSS3.

Эти кнопки не будут отображаться в Internet Explorer 8 и ниже, т.к. в этих браузерах нет поддержки CSS3 градиентов, закругления углов и теней для текста. А в IE9 нет поддержки CSS3 градиентов, хотя в нём можно воспользоваться специальным градиентным фильтром, который работает именно в IE6-9.

Давайте посмотрим код.

HTML:

<ul class="generic">
    <li><a href="#" class="button">Post comment</a></li>
    <li><a href="#" class="button danger">Delete post</a></li>
    <li><a href="#" class="button pill">This is a pill button</a></li>
    <li><a href="#" class="button big primary">Create Project</a></li>
    <li><a href="#" class="button disabled">I am Disabled =(</a></li>
</ul>

<ul class="button-group">
    <li><a href="#" class="button primary pill">Dashboard</a></li>
    <li><a href="#" class="button pill">Inbox</a></li>
    <li><a href="#" class="button pill">Account</a></li>
    <li><a href="#" class="button pill">Logout</a></li>
</ul>

CSS:

/* ===[ Generic ]=== */

.button {
    position: relative;
    overflow: visible;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #d4d4d4;
    margin: 0;
    text-decoration: none;
    text-shadow: 1px 1px 0 #fff;
    font: 11px/normal sans-serif;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
    background-image: -webkit-linear-gradient(#f4f4f4, #ececec);
    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
    background-image: -o-linear-gradient(#f4f4f4, #ececec);
    background-image: -ms-linear-gradient(#f4f4f4, #ececec);
    background-image: linear-gradient(#f4f4f4, #ececec);
    -moz-background-clip: padding;
    background-clip: padding; /**/
    /* commented out due to Opera 11.10 bug */
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em; /* IE hacks */
    zoom: 1;
    *display: inline;
}

.button:hover,
.button:focus {
    border-color: #3072b3;
    border-bottom-color: #2a65a0;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    background-color: #3C8DDE;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -webkit-linear-gradient(#599bdc, #3072b3);
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: -ms-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#599bdc, #3072b3);
}

.button:active,
.button.active {
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    border-color: #2a65a0;
    border-bottom-color: #3884CF;
    background-color: #3072b3;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
    background-image: -webkit-linear-gradient(#3072b3, #599bdc);
    background-image: -moz-linear-gradient(#3072b3, #599bdc);
    background-image: -o-linear-gradient(#3072b3, #599bdc);
    background-image: -ms-linear-gradient(#3072b3, #599bdc);
    background-image: linear-gradient(#3072b3, #599bdc);
}

/* overrides extra padding on button elements in Firefox  */

.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.button.primary { font-weight: bold }

/* ===[ Danger Button ]=== */

.button.danger { color: #900 }

.button.danger:hover,
.button.danger:focus,
.button.danger:active {
    border-color: #b53f3a;
    border-bottom-color: #a0302a;
    color: #fff;
    background-color: #dc5f59;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
    background-image: -webkit-linear-gradient(#dc5f59, #b33630);
    background-image: -moz-linear-gradient(#dc5f59, #b33630);
    background-image: -o-linear-gradient(#dc5f59, #b33630);
    background-image: -ms-linear-gradient(#dc5f59, #b33630);
    background-image: linear-gradient(#dc5f59, #b33630);
}

.button.danger:active,
.button.danger.active {
    border-color: #a0302a;
    border-bottom-color: #bf4843;
    background-color: #b33630;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
    background-image: -webkit-linear-gradient(#b33630, #dc5f59);
    background-image: -moz-linear-gradient(#b33630, #dc5f59);
    background-image: -o-linear-gradient(#b33630, #dc5f59);
    background-image: -ms-linear-gradient(#b33630, #dc5f59);
    background-image: linear-gradient(#b33630, #dc5f59);
}

/* ===[ Pill ]=== */

.button.pill {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}

/* ===[ Disable ]=== */

.button.disabled,
.button:disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/* ===[ Big ]=== */

.button.big { font-size: 14px }

/* ===[ Button Groups ]=== */

.button-group {
    list-style: none;
    padding: 0;
    margin: 10px; /* IE hacks */
    zoom: 1;
    display: block;
    overflow: hidden;
}

.button + .button,
.button + .button-group,
.button-group + .button,
.button-group + .button-group { margin-left: 15px }

.button-group li {
    float: left;
    padding: 0;
    margin: 0;
}

.button-group .button {
    float: left;
    margin-left: -1px;
}

.button-group > .button:not(:first-child):not(:last-child),
.button-group li:not(:first-child):not(:last-child) .button {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.button-group > .button:first-child,
.button-group li:first-child .button {
    margin-left: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-group > .button:last-child,
.button-group li:last-child > .button {
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ===[ Generic Unordered List ]=== */

ul.generic {
    list-style: none;
    display: block;
    overflow: hidden;
    margin: 10px;
    padding: 0;
}

ul.generic li {
    float: left;
    margin-left: 10px;
}

ul.generic li:first-child { margin-left: 0 }

Не поддерживаются браузеры:

• Internet Explorer 8.0 и ниже.

А вот и пример:

Увидеть больше примеров можно здесь.

Перевод статьи "Pure CSS3 Github Style Buttons" с сайта "cssdeck.com"

P.S. Это тоже может быть интересно:

• Псевдокласс :has() — не только «родительский селектор»
• «Запашки» кода React-компонентов
• CSS-выражения от контейнера для дизайнеров