Все наши кнопки, это обычные теги <a>. Каждой кнопке присвоен свой класс, который и формирует её отображение. Всё очень просто и понятно.
Изображение
Структура наших кнопок:

Код: Выделить всё

<a href="#" class="pager1">← новые сообщения</a><a href="#" class="pager2">старые сообщения →</a>
Здесь у нас 2 класса:
pager1 - кнопка с закруглением слева
pager2 - кнопка с закруглением справа

CSS структура наших кнопок:

Код: Выделить всё

a.pager1:link, a.pager1:visited {
    font: 14px/26px MisoRegular;
    letter-spacing: 1px;
    text-shadow: #1C9328 0 -1px 0;
    color: #fff;
    background-color: #444;
    display: inline-block;
    margin-right: 1px;
    padding-right: 15px;
    padding-left: 15px;
    
    -moz-border-radius: 13px 0 0 13px;
    -webkit-border-radius: 13px 0 0 13px;
    border-radius: 13px 0 0 13px;
    
    background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
    background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
    background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
    background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
    
    -moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
    -webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
    box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager2:link, a.pager2:visited {
    font: 14px/26px MisoRegular;
    letter-spacing: 1px;
    text-shadow: #1C9328 0 -1px 0;
    color: #fff;
    background-color: #444;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    
    -moz-border-radius: 0 13px 13px 0;
    -webkit-border-radius: 0 13px 13px 0;
    border-radius: 0 13px 13px 0;
    
    background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
    background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
    background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
    background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
    
    -moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
    -webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
    box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager1:hover, a.pager2:hover {
    line-height: 22px;
    padding-right: 13px;
    padding-left: 13px;
    border: 2px solid #9433FF;
    
    background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
    background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
    background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
    background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
    
    text-shadow: #37197e 0 -1px 0;
}

a.pager1:active, a.pager2:active {
    line-height: 26px;
    padding-right: 15px;
    padding-left: 15px;
    border-style: none;
    
    background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
    background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
    background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
    background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
}
Изображение
Структура наших кнопок:

Код: Выделить всё

<a href="#" class="transparent">CSS 3 Isometric Text</a> <a href="#" class="transparent">Downloads</a> <a href="#" class="transparent">Safari Extensions</a>
То есть присваиваем тегу <a> класс transparent.

Структура этих кнопок следующая:

Код: Выделить всё

a.transparent:link, a.transparent:visited {
    color: #fff;
    padding: 20px 40px;
    border-style: none;
    background-color: rgba(0,0,0,0);
    font: 14px/1 "Lucida Grande", Lucida, Verdana, sans-serif;
    text-shadow: #000 0 2px 2px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
}

a.transparent:hover {
    -moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
    -webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
    box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
    
    background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
    
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
    
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
    
    background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
    
    background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
    
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

a.transparent:active {
    background: rgba(0,0,0,.3);
    
    -moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
    -webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
    box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
}
Изображение
Этот пример, скорее не кнопки, а текст с 3D эффектом.

Класс для этого примера у нас text:

Код: Выделить всё

<a href="#" class="text">Twitter</a>
Очень простой CSS:

Код: Выделить всё

a.text:link, a.text:visited {
color: #fff;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font: 60px/60px 'ChunkFiveRegular';
    display: inline-block;
}

a.text:hover {
    text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

a.text:active {
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
    margin-top: 4px;
    line-height: 56px;
    color: #dcdcdc;
}
Изображение
Самый на мой взгляд интересный пример, круглая кнопка, которая при наведении на неё мыши поворачивается и выравнивает текст.
Структура у неё следующая:

Код: Выделить всё

<a href="#" class="round">Случайная<br>Статья</a>
CSS:

Код: Выделить всё

a.round:link, a.round:visited {
    width: 190px;
    color: #fff;
    font: 28px/30px LeagueGothicRegular;
    text-transform: uppercase;
    text-shadow: #6f0909 0 -1px 1px;
    border: 1px solid #6F0909;
    display: inline-block;
    padding-top: 70px;
    padding-bottom: 60px;
    
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    
    -moz-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
    -webkit-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
    box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
    
    background: -moz-linear-gradient(top, rgba(180,9,9,1) 0%, rgba(111,9,9,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,9,9,1)), color-stop(100%,rgba(111,9,9,1)));
    background: -webkit-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
    background: -o-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
    background: linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
    
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    
    -webkit-transform: rotate(-12deg);    
    -moz-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    -o-transform: rotate(-12deg);
    transform: rotate(-12deg);
}

a.round:hover {
    -moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
    -webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
    box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
    
    -moz-transform: rotate(0deg);
    -moz-transition: -moz-transform 0.3s ease-out;
    -webkit-transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transform: rotate(0deg);
    -o-transition: -o-transform 0.3s ease-out;
}

a.round:active {
    -moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
    -webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
    box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;

    background: -moz-linear-gradient(top, rgba(111,9,9,1) 0%, rgba(180,9,9,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(111,9,9,1)), color-stop(100%,rgba(180,9,9,1)));
    background: -webkit-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
    background: -o-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
    background: linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
    
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
Комментарии: 4

silver073000Василий 14 ноя 2013, 02:23 Сообщение

A можно ли первый вариант кнопок приспособить не к парным, так сказать, сочетаниям кнопок, а к тройным? Вот пример на картинке
Изображение

Хочу сделать так, чтобы по краям закругленные кнопки были, а по центру прямоугольная :) И как сменить цвет кнопок, а то зелёные как-то не особо подходят под subsilver? :)
  • 0

silver073000Василий 14 ноя 2013, 03:33 Сообщение

Ага, всё понял :) Создаём третий класс, например, pager3 и для него радиус закругления ставим 4-5, например, чтобы кнопка не была угловатая, а цвет в RGBA начальный 135,185,0,1 и финальный 51,134,8,1 меняются на любые свои :) В общем, класс должен выглядеть примерно так

Код: Выделить всё

    a.pager3:link, a.pager3:visited {
        font: 14px/26px MisoRegular;
        letter-spacing: 1px;
        text-shadow: #1C9328 0 -1px 0;
        color: #fff;
        background-color: #444;
        display: inline-block;
        margin-right: 1px;
        padding-right: 15px;
        padding-left: 15px;
       
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
       
        background: -moz-linear-gradient(top, rgba(92,202,248,1) 0%, rgba(16,134,195,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,202,248,1)), color-stop(100%,rgba(16,134,195,8,1)));
        background: -webkit-linear-gradient(top, rgba(92,202,248,1) 0%,rgba(16,134,195,1) 100%);
        background: -o-linear-gradient(top, rgba(92,202,248,0,1) 0%,rgba(16,134,195,1) 100%);
        background: linear-gradient(top, rgba(92,202,248,1) 0%,rgba(16,134,195,1) 100%)
       
        -moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
        -webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
        box-shadow: rgba(0,0,0,1) 0px 2px 1px;
    }

    a.pager3:hover, {
        line-height: 22px;
        padding-right: 13px;
        padding-left: 13px;
        border: 2px solid #9433FF;
       
        background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
        background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
        background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
        background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
       
        text-shadow: #37197e 0 -1px 0;
    }
        
        pager3:active  {
        line-height: 26px;
        padding-right: 15px;
        padding-left: 15px;
        border-style: none;
       
        background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
        background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
        background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
        background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
Сам вопрос задал, сам на него ответил :D Маладэс :ROFL:
Итог
Изображение
  • 0

CabinetAdmin 14 ноя 2013, 13:56 Сообщение

Вот здесь:

Код: Выделить всё

        pager3:active  {
перед именем класса должна быть точка и a, так как применяется к ссылке - a.pager3:active  {, плюс в конце закрытие - }
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 14 ноя 2013, 16:32 Сообщение

У меня это есть :) Просто в полусонном состоянии писал тут, то и пропустил, видать :)
  • 0

Похожие темы