Как создать простые кнопки с помощью 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 стилей. Надеемся, что вам понравился сегодняшний урок. Спасибо, что читаете нас!
This post was last modified on 18/09/2019 19:22
Последние посты
Генри Форд
Человек имеет два мотива поведения — один настоящий и второй, который красиво звучит Генри Форд…
Фридрих Ницше
Не нужно додумывать слишком много. Так вы создаете проблемы, которых изначально не было Фридрих Ницше…
Такой разный инвертор! Выбираем между кондиционерами Inverter, Inverter DC и Full DC
Лето в разгаре, а значит самое время задуматься о покупке кондиционера. Но как не потеряться…
Омар Хайям
Настоящий друг — это человек, который в глаза тебе выскажет все, что о тебе думает,…
Полезные советы по выбору раздвижной двери
Следует знать, что функциональность и дизайн работают рука об руку, когда вы используете раздвижную дверь.…