Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 18.11.2022)
83460
солдат
278
самолетов
261
вертолетов
2879
танков
5808
ББМ
1865
артиллерия
209
ПВО
393
РСЗО
4366
машин
16
корабли и катера
Как создать простые кнопки с помощью CSS3

Как создать простые кнопки с помощью CSS3

В сегодняшнем уроке мы на практике сделаем несколько классных, но простых, кнопок с помощью CSS3 стилей. Вы можете их использовать для красивого оформления пользовательского интерфейса своих проектов. Итак, приступим…

 

Шаг №1 – HTML код (каркас)

Каркасный HTML-код очень простой, мы создадим 3 тега ссылки (<a>) с классом button, и, поскольку мы будем использовать три разных цветовых стиля, присвоим каждой ссылке свой класс для цвета.

<html>
 <body>
  <div id="buttons">
   <a href="#" class="button green">кнопка 1</a>
   <a href="#" class="button blue">кнопка 2</a>
   <a href="#" class="button gray">кнопка 3</a>
  </div>
 </body>
</html>

 

 

Шаг №2 – Основные CSS стили

Теперь мы начнем придавать основные формы и стили кнопкам. Мы будем использовать свойство display: inline-block, чтобы другие кнопки могли располагаться рядом, а не с новой строки. Остальные свойства являются базовыми стилями CSS, вам не составит труда их понять.

.button {
 display: inline-block;
 position: relative;
 margin: 10px;
 padding: 0 20px;
 text-align: center;
 text-decoration: none;
 font: bold 12px/25px Arial, sans-serif;
 color: #fff;
}

 

 

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

.green {background: #94d800;}
.blue {background: #70c9e3;}
.gray {background: #d3d3d3;}

 

 

Шаг №3 – Продвинутые CSS3 стили

Теперь перейдем к самому интересному! Мы добавим закругленные углы, тени и базовую анимацию. Здесь мы используем различные префиксы для различных браузеров. Это необходимо, потому что эти свойства ведут себя по-разному в некоторых браузерах.

.button {
 display: inline-block;
 position: relative;
 margin: 10px;
 padding: 0 20px;
 text-align: center;
 text-decoration: none;
 font: bold 12px/25px Arial, sans-serif;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(255,255,255, .22);
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 -webkit-transition: all 0.15s ease;
 -moz-transition: all 0.15s ease;
 -o-transition: all 0.15s ease;
 -ms-transition: all 0.15s ease;
 transition: all 0.15s ease;
}

 

 

Шаг №4 – Фоновые цвета кнопок

На этом шаге мы добавим CSS3-градиенты фона для каждого цветового стиля. Если вы хотите создать другие градиенты фона, просто измените цвета.

.green {
 background: #94d800; /* старые браузеры */
 background: -moz-linear-gradient(top, #94d800 0%, #7bb300 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94d800), color-stop(100%, #7bb300)); /* Chrome, Safari4+ */
 background: -webkit-linear-gradient(top, #94d800 0%, #7bb300 100%); /* Chrome10+, Safari5.1+ */
 background: -o-linear-gradient(top, #94d800 0%, #7bb300 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #94d800 0%, #7bb300 100%); /* IE10+ */
 background: linear-gradient(top, #94d800 0%, #7bb300 100%); /* W3C */
}
.blue {
 background: #00c5ff; /* старые браузеры */
 background: -moz-linear-gradient(top, #00c5ff 0%, #12a3ce 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00c5ff), color-stop(100%, #12a3ce)); /* Chrome, Safari4+ */
 background: -webkit-linear-gradient(top, #00c5ff 0%, #12a3ce 100%); /* Chrome10+, Safari5.1+ */
 background: -o-linear-gradient(top, #00c5ff 0%, #12a3ce 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #00c5ff 0%, #12a3ce 100%); /* IE10+ */
 background: linear-gradient(top, #00c5ff 0%, #12a3ce 100%); /* W3C */
}
.gray {
 background: #cccccc; /* старые браузеры */
 background: -moz-linear-gradient(top, #cccccc 0%, #afafaf 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%, #afafaf)); /* Chrome, Safari4+ */
 background: -webkit-linear-gradient(top, #cccccc 0%, #afafaf 100%); /* Chrome10+, Safari5.1+ */
 background: -o-linear-gradient(top, #cccccc 0%, #afafaf 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #cccccc 0%, #afafaf 100%); /* IE10+ */
 background: linear-gradient(top, #cccccc 0%, #afafaf 100%); /* W3C */
}

 

 

Шаг №5 – Стили кнопок при наведении и нажатии

Для состояния наведения на кнопку и ее нажатия мы просто изменим параметры свойства box-shadows.

Наведение (стили при наведении кнопки мыши)

.button:hover {
 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
 box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}

 

 

Стили, которые срабатывают при нажатии кнопки

.button:active {
 -webkit-box-shadow: inset 0 0 3px rgba(0,0,0, .8);
 -moz-box-shadow: inset 0 0 3px rgba(0,0,0, .8);
 box-shadow: inset 0 0 3px rgba(0,0,0, .8);
}

 

 

 

И в заключение…

Вот и все! Мы создали простые, но красивые и симпатичные кнопки, с помощью лишь CSS3 стилей. Надеемся, что вам понравился сегодняшний урок. Спасибо, что читаете нас!

 

 

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

Ваш адрес email не будет опубликован.