Кнопка CSS. Выбирай себе любую! 18.07.2013

Здравствуйте! Рано или поздно наступает такой момент в дизайне, когда ты хочешь, чтоб смотрелось дорого и качественно. Это должно выражаться в деталях, например в таких как кнопка, css стиль которой заставляет пользователя задержать взгляд на ней. Это касается не только ребят которые делают сайты на заказ, но и обычных блоггеров, веб-мастеров, которые хотят преобразить свои сайты, доработать или изменить дизайн кардинально.

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

Конечно можно было просто вырезать эту кнопку из дизайна и вставить ее в виде картинки, но это не интересно было бы, да и как-то на отъе...сь, ну вообщем вы понимаете. Начал я делать эту кнопку css, получилось все шикарно. Но одно НО, делал я ее ооочень долго... Не соврать, наверно часа 3.

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

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

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

Кнопка CSS. Разбираем все на примерах.

Для того кто не знает как обращаться с CSS рекомендую почитать вот эту статью. Итак начнем с простого. Нам необходимо сделать кнопку.

Самый простой вариант сделать кнопку вот такой:

<a href="#" class="button salat bigr">Салатовый</a>

Что мы сделали? Мы просто сделали ссылку с надписью «Салатовый», вместо этой надписи пишем свою. И указали названия стилей которые мы будем использовать через пробел. Это button, salat и bigr.

Далее мы открываем скаченный файлик demo.html через текстовый редактор notepad++ и ищем эти стили по очереди с помощью комбинации клавиш Ctrl+F.

Стиль button прописан в самом верху файла начиная с 62 строчки, поэтому надо будет нажать несколько раз прежде чем поиск приведет вас к нужному месту. Или же просто поставить точку в строке поиска перед button вот так — .button и все сразу найдется.

Копируем этот стиль и вставляем в свой файл со стилями, либо делаем аналогично как в файле demo.html. Не забываем так же скопировать стили псевдо-классов .button:hover и .button:active.

.button {

display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 1.2em .55em;
text-shadow: 0 1px 1px rgba (0,0,0,.3);
— webkit-border-radius: .5em;
— moz-border-radius: .5em;
border-radius: .5em;
— webkit-box-shadow: 0 1px 2px rgba (0,0,0,.2);
— moz-box-shadow: 0 1px 2px rgba (0,0,0,.2);
box-shadow: 0 1px 2px rgba (0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

Тем же способом находим и копируем стили для классов salat и bigr.

Вот какой набор стилей у нас получится в итоге:

.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 1.2em .55em;
text-shadow: 0 1px 1px rgba (0,0,0,.3);
— webkit-border-radius: .5em;
— moz-border-radius: .5em;
border-radius: .5em;
— webkit-box-shadow: 0 1px 2px rgba (0,0,0,.2);
— moz-box-shadow: 0 1px 2px rgba (0,0,0,.2);
box-shadow: 0 1px 2px rgba (0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

/* салатовый */
.salat {
color: #d57ea5;
border: solid 1px #00FFE9;
background: #00FFBF;
background: -webkit-gradient (linear, left top, left bottom, from (#00FF9D), to (#00FFE5));
background: -moz-linear-gradient (top, #00FF9D, #00FFE5);
background-image: -o-linear-gradient (top, #00FF9D, #00FFE5);
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00FF9D', endColorstr='#00FFE5');
}
.salat:hover {
background: #00FFE5;
background: -webkit-gradient (linear, left top, left bottom, from (#00FFBF), to (#00E2D3));
background: -moz-linear-gradient (top, #00FFBF, #00E2D3);
background-image: -o-linear-gradient (top, #00FFBF, #00E2D3);
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00FFBF', endColorstr='#00E2D3');
}
.salat:active {
color: #A2927B;
background: -webkit-gradient (linear, left top, left bottom, from (#00FFE5), to (#00FF9D));
background: -moz-linear-gradient (top, #00FFE5, #00FF9D);
background-image: -o-linear-gradient (top, #00FFE5, #00FF9D);
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00FFE5', endColorstr='#00FF9D');
}

.bigr {
— webkit-border-radius: 2em;
— moz-border-radius: 2em;
border-radius: 2em;
}

В кнопка у нас будет выглядеть вот так:

Салатовый

Не знаю конечно кому такая кнопка подойдет, но и такую сделать тоже можно :)

Решение для input кнопок.

Есть у нас еще и такие кнопки:

<input id="submit" type="submit" name="submit" value="Кнопка">

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

Не важно что это одинарный тег. Просто добавляем наши классы внутрь тега input и готово:

<input id="submit" type="submit" name="submit" class="button salat bigr" value="Кнопка">

Стили у нас уже имеются, посмотреть их можно выше. На этом все, что хотел рассказать про кнопки на css. Если что-то упустил, задавайте вопросы, буду рад ответить.

Подпишитесь на обновления моего блога и будем держать связь! По прежнему буду писать о интересном из собственного опыта.

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

Добавить комментарий

ВКонтакте