CSS для начинающих. CSS кнопки это просто

CSS Buttons Article

Решил я начать новую серию статей – “CSS для начинающих”, надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам…

Рисуем кнопку

Для начала нам необходимо нарисовать кнопку, вроде этой:

CSS Button Preview

Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:

Button in Photoshop - Step 0

Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (“Fill Opacity” => 0%)):

Button in Photoshop - Step 1

Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.

Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:

Button in Photoshop - Step 2

Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):

Button in Photoshop - Step 4

Результат:

Button in Photoshop - Step 3

Результат с залитой границей:

CSS Button Photoshop Result

Если мы сделаем цветной фон:

CSS Button Photoshop Result
CSS Button Photoshop Result
CSS Button Photoshop Result

Ну вот – кнопочка и готова, приступим к следующему шагу…

Простая CSS кнопка

Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):

CSS Buttons Sprite

Теперь нам остается лишь слегка подправить CSS для таких кнопок:

01
02
03
04
05
06
07
08
09
10
11
12
13
.button {
    cursor:pointer;
    display:block;
    height:70px;
    width:320px;
    line-height:70px;
    text-align:center;
    background-image:url('images/buttons.png');
    background-repeat:no-repeat;
}
.button.green { background-position:0 0 } /* зеленая кнопка */
.button.green:hover { background-position:0 -350px } /* активная зеленая кнопка */
/* и т.д. */

Сам HTML код элементарен:

1
2
3
4
5
<a href="#" title="Label" class="button green">Label</a>
<a href="#" title="Label" class="button white">Label</a>
<a href="#" title="Label" class="button black">Label</a>
<a href="#" title="Label" class="button orange">Label</a>
<a href="#" title="Label" class="button red">Label</a>

Результат предсказуем:

CSS Button Sprite Result

Резиновая CSS кнопка

Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.

Строим DOM

Каждая кнопка будет представлять из себя элемент <a>, обернутый в <li>. Элемент <em> нам так же понадобится для создания резиновых кнопок, чтобы внести ясность приведу следующий скрин:

HTML Button

Ну и сам HTML код:

1
2
3
4
5
6
7
8
&amp;lt;ul class=&amp;quot;small&amp;quot;&amp;gt;
    &amp;lt;li class=&amp;quot;button&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; title=&amp;quot;Label&amp;quot;&amp;gt;Label&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li class=&amp;quot;button green&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; title=&amp;quot;Label&amp;quot;&amp;gt;Label&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li class=&amp;quot;button white&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; title=&amp;quot;Label&amp;quot;&amp;gt;Label&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li class=&amp;quot;button black&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; title=&amp;quot;Label&amp;quot;&amp;gt;Label&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li class=&amp;quot;button orange&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; title=&amp;quot;Label&amp;quot;&amp;gt;Label&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li class=&amp;quot;button red&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; title=&amp;quot;Label&amp;quot;&amp;gt;Label&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;

Примечание: можно использовать практически любые другие HTML теги, это дело вкуса, так что таким же образом вы можете изменить и элементы формы. Для упрощения HTML’а можно воспользоваться JavaScript’ом. Приведу пример:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
    $(document).ready(function(){
        $('form :button, form :submit').each(function(){
            var className = $(this).attr('class');
             
            $(this).wrap('&amp;lt;div class=&amp;quot;button '+className+'&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;');
            $(this).after('&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;');
        });
    });
&amp;lt;/script&amp;gt;
&amp;lt;form class=&amp;quot;rubber&amp;quot; onsubmit=&amp;quot;return false;&amp;quot;&amp;gt;
    &amp;lt;input type=&amp;quot;button&amp;quot; class=&amp;quot;green&amp;quot; title=&amp;quot;Button&amp;quot; value=&amp;quot;Button&amp;quot;/&amp;gt;
    &amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;red&amp;quot; title=&amp;quot;Submit&amp;quot; value=&amp;quot;Submit&amp;quot;/&amp;gt;
&amp;lt;/form&amp;gt;

Пишем CSS

Читаем комментарии по коду:

01
02
03
04
05
06
07
08
09
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.button {
    /*
      у нас кнопка с закруглением - значит нам необходимо
      у DOM элемента так же скруглить углы
     */
    border-radius:10px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-radius: 10px;
     
    /*
      внутренний элемент &amp;lt;a&amp;gt; должен быть смещен относительно &amp;lt;li&amp;gt;
      на 20px - освобождаем место для &amp;lt;em&amp;gt;
     */
    padding-right:20px;
 
    /*
       данные элемент будет relative - т.е.
       все элементы внутри него с абсолютным
       позиционированием будут плясать от него
    */
    position:relative;
}
.button a, .button em{
    /* ссылке и элементу em задаем одинаковое фоновое изображение */
    background-image:url('css/images/button.png');
    background-repeat:no-repeat;
}
.button a{
    /*
       ссылку делаем блочным элементом
       задаем высоту элемента, а так же свойство
       line-height - с его помощью мы выравниваем текст по вертикали
    */
    display:block;
    height:52px;
    line-height:52px;
 
    outline:none;
    color:#333;
    font-size:18px;
    text-indent:20px;
    text-decoration:none; 
    text-align:center;
    text-shadow: #333 0px -1px 0px;  
}
.button em{
    /*
       внутренний элемент так же будет блочным
       с размером 52х20, с абсолютной позиционированием
    */
    display:block;        
    position:absolute;
    background-position:100% 0;
    width:20px;
    height:52px;
    top:0px;
    right:0px;
}
/* цвет шрифта для некоторых кнопок лучше поменять */
.button.green a,
.button.black a,
.button.red a
{
    color:#fff;
}
/* тут указываем цвет наших кнопок */
.button.green { background-color:#009e0f }
.button.green:hover{ background-color:#068612 }
.button.white{ background-color:#f0f0f0 }
.button.white:hover{ background-color:#c0c0c0 }
.button.black{ background-color:#000 }
.button.black:hover{ background-color:#333 }
.button.orange{ background-color:#ff7800 }
.button.orange:hover{ background-color:#c60 }
.button.red{ background-color:#f00 }
.button.red:hover{ background-color:#c00 }

Наблюдаем результат

Сравним результат наших трудов в разных браузерах:

CSS Button Compare Result

Как вы можете заметить, есть несколько проблем с данной реализацией:

  • полупрозрачность в IE6 не работает – можем докрутит хаки, но зачем – IE6 можно считать умершим
  • box-radius в IE и Opera не работает – либо отказываемся от данной фичи, либо зарисовываем свободное пространство фоновым цветом (для IE так же есть грязный хак, см.: Curved corner (border-radius) cross browser)

Кнопочки можно пощупать на демо, все сорцы доступны по следующей ссылке:

Download lesson Simple CSS Buttons

Еще ссылки по теме:

18 thoughts on “CSS для начинающих. CSS кнопки это просто”

  1. Я уже писал, что кнопка одной картинкой это хорошо, но требует семантического мусора в виде ю

    Моё имхо такое, что лучше сделать 2 картинки, зато кнопка будет выгялдеть просто как

    1
    <a>Button text</a>
  2. Pingback: CakePHP. Как создать модуль без привязки к таблице в базе данных

  3. Идея с начинанием распространения основ CSS – отличная. Есть замечание по поводу кнопочек – Fx (FireFox) при клике любит обводить ссылочку уродской дот-овой рамочкой, особенно уродско это выглядит, когда ссылка по размеру меньше картинки кнопки (у тебя так в элементах формы). Лечится добавлением ссылке css-свойств :

    1
    2
    outline: none;
    -moz-outline-style: none;

  5. Идея с начинанием распространения основ CSS – отличная. Есть замечание по поводу кнопочек – Fx (FireFox) при клике любит обводить ссылочку уродской дот-овой рамочкой, особенно уродско это выглядит, когда ссылка по размеру меньше картинки кнопки

    Вообще-то это очень полезная фича для ссылок и прочих навигационных элементов, позволяющая не забыть, какой из элементов активен. Так что не советую ее повсеместно отключать.

  6. Кнопочки должны подсвечиваться а не темнеть.Подсвечиваться а не темнеть!

  7. Хороший урок, увидел я его на другом сайте. Благодаря ему, понял как создавать кнопки и растягивать ссылку на весь блок. Нашел очень интересный момент, что можно все кнопки в одну картинку сохранить. Правда урок немного устарел, код можно немного оптимизировать, но для новичков в самый раз.
    А теперь вопрос, резиновые кнопки действительно резиновые, а то они что-то не растягиваются при увеличение в них текста?

  8. Урок, конечно, хороший. Конкретные практические примеры, всё наглядно. Но использовать фотошоп лишь для рисования кнопок – это слишком! :(

    Кстати, для рисования тут бы больше подошёл кекторный редактор. Например, тот же inkscape – он и бесплатный, и такая задача решается на раз-два в меньшее число шагов.

  9. Спасибо вам за ваш труд и прекрасные уроки.
    Чтобы мы, “чайники”, делали бы без вас, тех, кто нам помогает советами и примерами?

  11. ну а вообще правильней закругленные углы делать не картинками, а с помощью CSS3 но они не будут работать во многих браузерах, нодля этого есть следующее решение
    http://prootime.ru/css-zakruglennie-ugli.html

  12. Pingback: кнопка картинка | Все картинки рунета

  13. Спасибо большое за урок! вижу тут собрались как-раз люди прошаренные :) поэтому я, как чайник, задам извечный вопрос: как отцентрировать текст на кнопке не только по ширине, но и по высоте?

    1. Хороший урок, если кому интересно есть еще прикольный вариант без изображений на

      В опере они красивенькие.. кругленькие, с затемнениями, а в ie прямоугольники. Я вот MFC DHTML диалог ваяю, но там как понимаете ie внутри.Так что вариант Антона

Comments are closed.