Многие из моих сокурсников задавались вопросом, когда в нашем техникуме проходила сдача курсовой работы, конечной целью которой было – сверстать сайт, как же я создаю такие красивые кнопочки? Честно сказать, я и сам поначалу задавался вопросом, как же создавать на сайте таки прикольные кнопки, а не просто вставлять слово, просто подчёркнутое чертой и имеющее немного другой цвет, а при переходе и вовсе блювотно-фиолетовый оттенок.
Рисунок 1: Пример кнопок
И вот, штудируя просторы всемирной паутины, я наткнулся на стили, которые используются для создания сайта. Стили – это по сути совершенно другой язык (я бы даже сказал, расширенный набор параметров), немного отличающийся от того же HTML. В моём понимании HTML выступает неким каркасом сайта, в то время как CSS – это непосредственно его красота. По аналогичному примеру можно разобрать человека: скелет и мышцы, с кожным покровом. После длительного изучения стилей и тестирования их на множестве файлов с названием test.html и test_1.html, я полностью принял их и понял, что используя стили, становиться проще, да и приятнее создавать сайт.
Сразу отмечу, что в этом уроке я не буду затрагивать тему, по типу видов подключения стилей, а также основных построений конструкций сайта, а сразу перейду к делу, пошагово описывая процесс создания. Но если вам всё же интересно почитать мои мысли об этом всём, предлагаю вам порыскать на нашем сайте статейку, направленную именно на эти темы.
Создаём структуру кнопки на HTML
Для начала нам необходимо создать первичную структуру сайта: HTML – HEAD - STYLE – BODY.
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Ну и, конечно же, как вы можете заметить, сами стили я буду использовать в самом документе сайта, хоть это и не правильно, но каждый видит по-своему. Переходим к нашему созданию. В первую очередь создадим контейнер (DIV) и завернём его в ссылку (A). Ах да, чуть не забыл… Для контейнера DIV, нужно прописать атрибут class и присвоить ему значение «button». Выглядеть это всё, будет следующим образом:
<html>
<head>
<style>
</style>
</head>
<body>
<a><div class = "button">КНОПОЧКА</div></a>
</body>
</html
Половина дела сделана, осталась вторая половина. Переходим к стилям, и начинает творить чудеса. В разделе STYLE обращаемся к классу нашей кнопки и прописываем различные атрибуты, влияющие на её форму и внешние признаки. Код страницы будет выглядеть следующим образом.
html>
<head>
<style>
.button {
width: 200px;
height: 42.5px;
background-color: #000;
border-radius: 10px;
color: #fff;
font-size: 20pt;
text-align: center;
padding-top: 7.5px;
cursor: pointer;
font-family: impact;
}
</style>
</head>
<body>
<a><div class = "button">КНОПОЧКА</div></a>
</body>
</html>
Рисунок 2: Получившийся элемент
Да, вот они самые стили. Разберемся, что здесь происходит и как настраивать кнопку, в зависимости от параметров.
- width – этот параметр отвечает за ширину кнопки, в моём случае 200 идеально подходит для размера.
- height – параметр, отвечающий за высоту кнопки.
- background-color – один из параметров заднего фона. В данном случае цвет. Углубляясь в оптимизацию сайта и более быструю загрузку, я понял, что лучше всего весь сайт создавать при помощи цветов, напрочь отказавшись от картинок. Даже если вы используете градиентный рисунок, намного оптимальнее будет задать его через свойство gradient. Это ускорит загрузку сайта, хоть и не намного. #000 – в данном случае это значение цвета, заданное в 16-тиричной системе счисления. Можно также задать значения black, red. green или же попросту указать rgb(24, 74, 64). Все методы сработают.
- border – radius – параметр, отвечающий за небольшое закругление, вокруг кнопки по краям, в моём случае, это 10 пикселей.
- color – иногда в моей голове случаются сильные конвульсии и я зачастую путаю color с background-color, а так, этот параметр меняет цвет текста или какого-либо символа.
- font-size – один из параметров, меняющих размер шрифта, указывается в таких значениях как пиксели (px) или же пункты (pt).
- text-align – параметр отвечающий за положение текста, слева (left), справа (right), по центру (center), по ширине (justify).
- padding-top – параметр отвечающий за отступы, в данном случае отступ сверху на 7,5 пикселей. Это своего рода некоторый костыль, который выравнивает положение текста посредине блока.
- cursor: pointer – параметр, служащий для изменения курсора при наведении.
- font-family – и собственно ещё один из параметров, отвечающих за шрифт. К слову, impact является одним из стандартных шрифтов WINDOWS, однако зачастую отсутствующий на телефонах с операционной системой android.
- Следующим этапом, следует убрать подчеркивание текста в кнопке, которое появиться если вы пропишите атрибут HREF в ссылке (А).
a {
text-decoration: none;
}Именно этот кусок текста, следует вставить после параметров класса BUTTON или же перед ним. Свойство, что прописано в этом классе, отключает подчеркивание кнопки, что собственно нам и нужно.
Как добавить иконку в кнопке?
Иногда красивой кнопки становиться мало, и хочется нечто большего. В такой момент приходит помощь, в создании небольшой иконки, перед или же после текста.
Рисунок 3: Иконка в кнопке
Как же это сделать?
Переходи к редактированию кода, указанного выше. Нам следует добавить элемент IMG непосредственно в сам контейнер кнопки DIV, а так же указать у него один из атрибутов SRC – отвечающий за путь до картинки.
Рисунок 4: Кнопочка с иконочкой
Сразу скажу, что с первого раза может не получиться. И ваша кнопка немного съедет. Окажется немного выше или ниже положенного положения.
Именно меня такая кнопка не устраивает, поскольку иконка кажется для меня слишком большой. Переходим к написанию стилей. Уменьшим иконку и выровняем её относительно текста. Делается это следующим образом:
.button img {
float: left;
margin-top: 7.5px;
width: 20px;
height: 20px;
margin-left: 20px;
}
Рисунок 5: Кнопка с уменьшенной иконкой
Разберёмся, что тут происходит:
- float – параметр, позволяющий обтекать кнопку с левой (left) или правой стороны (right);
- margin-top и margin-left – это невидимые границы, создающий отступы с верхней стороны и левой стороны. Так-же можно задать отступы с низу (bottom) и права (right);
- width – ширина картинки.
- height – высота картинки.
Именно таким способом, можно создать красивую кнопку на сайте, привлекающую к себе внимание, что играет немало важную роль в создании сайта.
Полный код страницы:
html>
<head>
<style>
.button {
width: 200px;
height: 42.5px;
background-color: #000;
border-radius: 10px;
color: #fff;
font-size: 20pt;
text-align: center;
padding-top: 7.5px;
cursor: pointer;
font-family: impact;
}
.button img {
float: left;
margin-top: 7.5px;
width: 20px;
height: 20px;
margin-left: 20px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<a><div class = "button">
<img src = "ic-menu-dark.png">
КНОПОЧКА
</div></a>
</body>
</html>
