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

Здравствуйте, сейчас я покажу на четырех примерах, как сделать кнопку для сайта. Кнопка, естественно, будет иметь ссылку и переправлять посетителя на нужную страницу. В качестве контейнера для ссылки будет использован тег 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

Курсы программирования для детей курсы по программированию для детей Владивосток.

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

Классные анимированные кнопки для сайта

Выкладываю архив со стильными анимированными кнопками для сайта, выполненными на чистом CSS, без использования…

Стильные соц кнопки для сайта

Ни для кого не секрет, что кнопки социальных сетей для сайта это полезный элемент…

Красочные CSS кнопки для сайта | Стили CSS кнопок (3)

Посмотрите на эти CSS кнопки для сайта. А ведь легко можно взять и добавить…