ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Учимся делать простую кнопку на сайт

.

knopka1Учимся делать простую кнопку на сайт

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

Я специально посмотрел иностранные сайты и на многих из них присутствуют такие нехитрые кнопки, с минимумом стилизации.
Начнем делать кнопку на сайт с HTML разметки.

Разметка одинаковая для всех примеров, единственное, что для каждой кнопки применен свой класс: flat-button, radius-button, tu-radius-button, shadow-radius-button

Можно, конечно, присваивать и идентификатор id, но тогда, если проходить проверку на валидаторе, то он посчитает ошибкой применение одного ID несколько раз:

Ну а теперь CSS коды, которые немного отличаются друг от друга.
Пример №1 Я взял как базовый и к следующим примерам кнопок будут просто добавляться дополнительные стили. Так-что сделать кнопку на сайт не так уж сложно.

kno

Вот код для создания данной кнопки:

Пример №2: К первому примеру добавлено свойство border-radius с префиксами для браузеров. В итоге получается кнопка с закругленными уголками.

Пример №3: В зтом примере кнопки применено закругление лишь двух сторон — верхней левой border-top-left-radius и нижней правой border-bottom-right-radius. Получилось очень даже неплохо, на мой взгляд.

knop

Пример №4 Ну а здесь, в дополнение к закругленным уголкам добавлена еще и тень. Свойство box-shadow.

Как видите, самостоятельно сделать кнопку для сайта не такое уж мудреное занятие. Берите примеры за основу, ну а дальше уже экспериментируйте со стилями, приспосабливайте под свои проекты. А вот вам в помощь пару онлайн генераторов:

http://css3gen.com/

http://border-radius.ru/

Ну вот и все друзья, теперь вы знаете, как создать красивые кнопки для своих сайтов.

БЕРЕГИТЕ СЕБЯ!

 




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *