Создаем стильную кнопку, используя только CSS3

18 сентября 2013 | Опубликовано в css | 4 Комментариев »

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

Финальный результат:

Посмотреть пример кнопки на CSS

Структура HTML

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="container">

        <a href="#">Push</a>

</div>
</body>
</html>

Html код для этого примера довольной простой, кроме основной структуры документа Doctype, ссылки на файл стилей CSS и название страницы, нам нужен якорь. Этот якорь может быть легко выбран в CSS, так как он единственный на странице, но мы добавим class="btn", что больше подходит для создания настоящего веб-сайта.

Создание стилей CSS

a.btn {
        display: block; width: 250px; height: 60px;
        padding: 40px 0 0 0; margin: 0 auto;
}

Файл CSS начинается с некоторых основных стилей для подготовки демонстрационного файла, после этого мы можем начать создавать стили для якоря. Якорь по умолчанию строчный, так что display: block; преобразует это в блок, чтобы можно было добавить определенные ширину и высоту. Внутренний отступ оттолкнет текст от верхнего края кнопки, а внешний отступ используется, чтобы отцентровать кнопку в демонстрации.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
}

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

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;
}

Свойство CSS3 box-shadow может быть использовано после этого, чтобы создать эффект внутреннего свечения, как в Photoshop. Добавление inset в код разместит свечение внутри элемента, а не снаружи. Мы не сдвигаем тени по каким-либо осям, но мы размазываем их на 6px, чтобы смягчить влияние эффекта.

Простая зеленая граница шириной 1px обрамляет кнопку, после чего углы удаляются, используя свойство border-radius.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;
        font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
        text-transform: uppercase; text-decoration: none;
        color: #147032;
        text-shadow: 0px 1px 2px #b4d1ad;
}

Теперь, когда общая графика кнопки создана, мы можем перейти к тексту. Шрифт настроен, используем сокращение CSS, назначая его как 55px Helvetica жирный, text-align, text-transform и text-decoration позиционируют текст по центру, переводят его в заглавные буквы и удаляют подчеркивание, которое по умолчанию используется для ссылок.

Наконец, цвет назначен как темно-зеленый, после этого text-shadow используется, чтобы создать эффект углубления. Светло-зеленая тень сдвинута на 1px по оси Y и размазана на 2px.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;

        font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
        text-transform: uppercase; text-decoration: none;
        color: #147032;
        text-shadow: 0px 1px 2px #b4d1ad;

        -moz-transition: color 0.25s ease-in-out;
        -webkit-transition: color 0.25s ease-in-out;
        transition: color 0.25s ease-in-out;
}

        a.btn:hover {
               color: #145675;
               -moz-transition: color 0.25s ease-in-out;
               -webkit-transition: color 0.25s ease-in-out;
               transition: color 0.25s ease-in-out;
        }

Все, что осталось, — настроить простое состояние, когда указатель находится над кнопкой. К сожалению, градиенты CSS и переходы CSS не могут быть использованы вместе, так что мы остановимся на простом изменении цвета текста. Код перехода определяет свойство color и указывает браузеру плавно перейти из одного состояния в другое за 0,25 секунд.

Когда указатель мыши находится над кнопкой, цвет текста на ней плавно изменится от зеленого к синему.

Законченная кнопка на CSS

Посмотрите пример, чтобы увидеть законченную кнопку на CSS в действии. Наша графика построена, используя смесь градиентов, границ и теней CSS, чтобы повторить эффекты, которые раньше могли быть созданы только в Photoshop. Учитывая, что современные браузеры Firefox, Safari и Chrome поддерживают эти свойства CSS3, Вы можете смело добавлять эти украшающие эффекты в дизайн Вашего веб-сайта.

Посмотреть пример кнопки на CSS.

Автор урока Chris Spooner.

Перевод — Дежурка.

Смотрите также:

Опубликовано в css, сентября 18, 2013
Метки: css3, css3 переходы, кнопка css3, урок css3, урок кнопка, уроки по СSS

�

Dark Wood
18 сентября 2013 в 13:43
0

Давным-давно, в далекой-далекой галактике: webdesign.tutsplus.com/tu...he-css3-version/ То есть смысл урока несколько непонятен. Это уже было очень давно и при том более навороченное (и не только представленный пример: habrahabr.ru/post/168117/ и другие варианты).

Mary Ответ:
сентября 18, 2013 at 6:11 пп

0

повторение — мать учения! А если серьезно, то Дежурку читают в том числе начинающие специалисты, которым, мы надеемся, этот урок поможет развить свои навыки. (Раз уж опытные пользователи это уже умеют)
А расскажите пожалуйста: урок на какую тему было интересно увидеть вам? Мы стараемся учитывать предпочтения всех наших читателей, и будем рады узнать ваши предпочтения!

Dark Wood Ответ:
сентября 18, 2013 at 10:05 пп

+2

Честно говоря, не ожидал услышать такой ответ :). Обязательное замечание, что всё написанное ниже является моим мнением, которое может не совпадать с мнением редакции. Все ссылки на примеры являются именно ссылками на примеры; пожалуйста, не надо считать их рекламой чего-то конкретного.
Хотелось бы видеть основы, отвечающие не на вопрос «как», а «зачем» и «почему». Не рассматривать только какой-то конкретный пример разработки логотипа, а рассказать почему стоит делать так, а не иначе, каковы общие нюансы разработки, особенности типографики в логотипах (пример: habrahabr.ru/post/190910/, хотя пример не самый лучший, потому что «FedEx» уже очень большой баян, как говорится, но всё прочее очень даже). И я говорю не только о логотипах, но и, например, иконках: в чем разница рисования больших (512x512) и маленьких (16x16, 32x32) версий (хотя этой информации много, но это тоже пример); айдентике (почему на визитках нежелательны горизонтальные линии во всю их длину, рамки и прочие подобные элементы; почему визитка просто с именем и контактами, напечатанная на хорошей бумаге, будет во многих случаях лучше вычурного и радужного «супердизайна»; что вообще такое эта «айдентика» и как надо работать с каждым ее элементом); типографике в общем (в веб-дизайне/верстке сайтов, в частности): naikom.ru/blog/archives/3959, coding.smashingmagazine.c... - and-techniques (и пример для конкретной программы: www.smashingmagazine.com/...obe-illustrator/). Да, многое здесь тоже будет повторением, но, на мой взгляд, более полезным, чем какой-то_там_по_счету урок по кнопкам на чистом CSS. К тому же, я не скажу, что таких материалов много на русском языке. Близкие темы объединить в подробную серию (превосходный пример исследований с вводными данными, общим описанием проблемы и подробнейшим ее рассмотрением в разных аспектах: www.ixbt.com/portopc/96dpi.shtml).
Еще раз напомню, что это лишь примеры и основы разные бывают. Как предмет для размышлений, три урока с tuts+ по основам рисования тех или иных элементов. И хоть в основном они и отвечают на вопрос «как», но делают это с лихвой (vector.tutsplus.com/tutor...o-drawing-wings/, vector.tutsplus.com/tutor... - face-correctly/, vector.tutsplus.com/tutor...ead-in-3d-space/). Хотя, по-моему, это немного декоррелирует с тематикой сайта.
По урокам. Можно было бы чуть почаще видеть сложные уроки (как, например, эта иконка для iOS: dribbble.com/shots/399426... - Camera-iOS-Icon; где-то на просторах интернета есть перевод подробного урока аналогичного типа, только там Canon вроде делали, сейчас его не нашел).
Мне нравятся ваши подборки: полезных ресурсов, дизайнерских печенек (логотипов, иконок, векторных данных). Можно было бы еще давать не только готовые «блюда», но и советы по подготовке «ингридиентов»: как сделать вот такую штуку или вон ту; как добавить текстуру в векторную иллюстрацию - это, кстати, интересная тему, которую тоже можно подробно рассмотреть (векторный гранж, 100% векторный шум, способы создания металлической текстуры (векторными способами, понятное дело), кожа, реалистичный камень и так далее). По всему этому можно найти ответы в интернете (и на русском языке), но вдруг найдутся/придумаются другие интересные способы. И вот еще по вектору: трассировка - что это; когда и как лучше использовать; какие есть специальные утилиты и настройки в «больших» редакторах (Illustrator, Corel, Inkscape); в чем преимущество сложной трассировки в Inkscape перед платными аналогами (далеко не все это знают).
Как вы, полагаю, заметили - мои предложения связаны с графикой. Это моё основное увлечение, тогда как CSS и прочее подобное лишь побочное, поэтому по данной тематике я многого сказать не могу, потому как слежу за темой даже менее чем вполглаза.
—

Небольшое примечание вашим переводчикам. Нисколько не хочу умалять их труды, но временами перевод хромает. Я даже пару раз не выдерживал и поправлял. Я полагаю, что у вас есть связь с ними? Попросите их, пожалуйста, вычитывать свои переводы на предмет логических стыковок и различного рода ошибок русского языка, который богат на синонимы, да и метафору с «прямым» смыслом можно написать.
Спасибо за внимание :).

Mary Ответ:
сентября 19, 2013 at 11:35 дп

0

Какой вы молодец что потратили время и ответили так развернуто! Спасибо вам за это! Очень полезный комментарий и конструктивный способ выражения позиции.

Приятно иметь дело с таким участливым читателем! Мы прислушались к вашим пожеланиям, и обогатили копилку идей для публикаций.
Добра вам! *IN LOVE*

Создаем стильную кнопку, используя только CSS3

Финальный результат:

Структура HTML

Создание стилей CSS

Законченная кнопка на CSS

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые