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


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

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

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

Скачать

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

<div class="flat-button"><a href="#">Upload</a></div>
<div class="radius-button"><a href="#">Upload</a></div>
<div class="tu-radius-button"><a href="#">Upload</a></div>
<div class="shadow-radius-button"><a href="#">Upload</a></div>

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

сделать кнопку для сайта

/*------------ Пример 1 ---------*/
.flat-button {
width: 150px;
background: #73c1bd;
font-size: 2.5em;
font-weight: bold;
border: 2px solid #fff;
padding: 5px 20px 5px 20px;
margin: 30px auto;
cursor: pointer;
}
.flat-button:hover {
background: #ee9397;
}
.flat-button a {
color: #fff;
}

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

/*------------ Пример 2 ---------*/
.radius-button {
width: 150px;
background: #73c1bd;
font-size: 2.5em;
font-weight: bold;
border: 2px solid #fff;
padding: 5px 20px 5px 20px;
margin: 30px auto;
cursor: pointer;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.radius-button:hover {
background: #ee9397;
}
.radius-button a {
color: #fff;
}

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

сделать кнопку для сайта

/*------------ Пример 3 ---------*/
.tu-radius-button {
width: 150px;
background: #73c1bd;
font-size: 2.5em;
font-weight: bold;
border: 2px solid #fff;
padding: 5px 20px 5px 20px;
margin: 30px auto;
cursor: pointer;
-webkit-border-top-left-radius:30px;
-webkit-border-bottom-right-radius:30px;
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:30px;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
}
.tu-radius-button:hover {
background: #ee9397;
}
.tu-radius-button a {
color: #fff;
}

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

/*------------ Пример 4 ---------*/
.shadow-radius-button {
width: 150px;
background: #73c1bd;
font-size: 2.5em;
font-weight: bold;
border: 2px solid #fff;
padding: 5px 20px 5px 20px;
margin: 30px auto;
cursor: pointer;
-webkit-border-top-left-radius:30px;
-webkit-border-bottom-right-radius:30px;
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:30px;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
-webkit-box-shadow: 0px -1px 9px 0px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px -1px 9px 0px rgba(50, 50, 50, 1);
box-shadow: 0px -1px 9px 0px rgba(50, 50, 50, 1);
}
.shadow-radius-button:hover {
background: #ee9397;
}
.shadow-radius-button a {
color: #fff;
}
Смотреть
Скачать

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


Похожие по Тегам статьи


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

  1. Надежда

    Егор, здравствуйте, я в CSS не сильна, у меня сайт на вордпресс, хочу себе такие кнопки, подскажите мне, пжста, код CSS в таблицу стилей (style.css) вставляем? в любое место?
    Upload — в нужное место поста?

  2. Егор Автор записи

    Здравствуйте, Надежда. Все верно.