Monday, 06 August 2012 17:37

Создаем кнопку с помощью CSS

Очень частый вопрос новичка в CSS "Как мне создать кнопку?" Это простой вопрос со сложным ответом. Есть довольно много способов как это сделать и к сожалению есть также довольно много способов, чтобы пойти по неправильному пути. Сегодня мы научимся как правильно и всего в нескольких шагах создать CSS кнопку.

Шаг 1: HTML

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

<a href="http://clasny.com/" class="button">Click Me</a>

В этот момент вы должны иметь только простой текст ссылки по умолчанию.

click me

Шаг 2: Основные стили кнопки

Теперь, когда мы получили наш HTML все готово к работе, пришло время перейти к CSS. Помните, что мы создали "button" класс для выражения цели CSS ориентации, поэтому обязательно используйте его для этого шага:

.button {/* Код здесь */}

Первое, что мы хотим сделать в нашем CSS является определить основные окна, которые будут составлять нашу кнопку формы. Вот стили, которые я использовал. Обратите внимание, что мой выбор цвета и размеры совершенно необязательны, не стесняйтесь использовать все что угодно.

.button {
display: block;
height: 100px;
width: 300px;
background: #34696f;
border: 2px solid rgba(33, 68, 72, 0.59);
}

Самое главное здесь было установить display: block;. Это позволит нам превратить нашу текстовую ссылку в большую коробку с заданной шириной и высотой. После этого я просто установил размер, цвет фона, а затем добавил границы.

После второго шага вы должны иметь довольно непревликательный ящик с текстом внутри.

После второго шага

Шаг 3: Стили текста

Пришло время заменить уродлевый текст.
.button {
 
    display: block;
    height: 100px;
    width: 300px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
 
 
a.button {
    text-decoration: none;
}

Здесь мы видим, что я добавил цвет в текст, который, по существу, более темный оттенок цвета кнопки. Этот трюк достигается установкой цвет текста на черном и снижения прозрачности с помощью RGBA.

После шага три кнопка уже должна фактически начать выглядеть как кнопка!

После шага три

Шаг 4: Добавляем стили CSS3

Предыдущий шаг подводит нас к хорошей, функционирующей кнопке. К сожалению, это довольно скучно, добавим немного новых CSS3 стилей

.button {
 
    display: block;
    height: 100px;
    width: 300px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 
    background: linear-gradient(top, #34696f, #2f5f63);
    border-radius: 50px;
    box-shadow: 0 8px 0 #1b383b;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
 
}
 
a.button {
    text-decoration: none;
}

Во-первых, я добавил градиент. Далее идет граница радиуса. Я решил пойти с действительно тяжелыми закругленным углом, который даст кнопке форму таблетки.

Наконец, я добавил тени и углы. Это даст хороший маленький искусственный 3D эффект, который не требует слишком много работы или кода.

Используйте Prefixr

Обратите внимание, что код выше, не является кросс-браузерным.

Я могу бросить весь код код в маленький бесплатный инструмент http://prefixr.com/. Который обработает и подправит мой код.

.button {
 
    display: block;
    height: 100px;
    width: 300px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 
    background: -webkit-linear-gradient(top, #34696f, #2f5f63);
    background: -moz-linear-gradient(top, #34696f, #2f5f63);
    background: -o-linear-gradient(top, #34696f, #2f5f63);
    background: -ms-linear-gradient(top, #34696f, #2f5f63);
    background: linear-gradient(top, #34696f, #2f5f63);
 
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
 
    -webkit-box-shadow: 0 8px 0 #1b383b;
    -moz-box-shadow: 0 8px 0 #1b383b;
    box-shadow: 0 8px 0 #1b383b;
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
 
}
 
a.button {
    text-decoration: none;
}

После шага четыре, Ваша кнопка должна выглядеть гораздо острее, чем раньше. Почти готово!

После шага четыре

Шаг 5: Hover Стили

Последним шагом для нашей кнопки является определение поведения при наведении курсора. При наведении указателя мыши на кнопку, всегда приятно получить немного визуальной обратной связи.

.button {
 
    display: block;
    height: 100px;
    width: 300px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 
    background: -webkit-linear-gradient(top, #34696f, #2f5f63);
    background: -moz-linear-gradient(top, #34696f, #2f5f63);
    background: -o-linear-gradient(top, #34696f, #2f5f63);
    background: -ms-linear-gradient(top, #34696f, #2f5f63);
    background: linear-gradient(top, #34696f, #2f5f63);
 
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
 
    -webkit-box-shadow: 0 8px 0 #1b383b;
    -moz-box-shadow: 0 8px 0 #1b383b;
    box-shadow: 0 8px 0 #1b383b;
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
 
}
 
a.button {
    text-decoration: none;
}
 
a.button:hover {
    background: #3d7a80;
    background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
    background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
    background: -o-linear-gradient(top, #3d7a80, #2f5f63);
    background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
    background: linear-gradient(top, #3d7a80, #2f5f63);
}
Теперь при наведении мыши на кнопку, ее цвет / яркость будут менятся.

Готово!

После шага пять, вы все сделали! Теперь вы должны иметь красивую кнопку созданую полностью на CSS и HTML.

CSS Button

Прочитано 9671 раз
Другие материалы в этой категории:
« CSS3 аккордеон
Социальные кнопки на CSS3 »