В этой заметке мы создадим красивую кнопку, которая будет при наведении менять свой цвет.
Выглядеть это будет так:
А вот короткий код, который создаёт эту кнопку
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Кнопка CSS</title>
<style>
.button {
border-top: 1px solid #f79a86;
background: #ffb882;
background: -webkit-gradient(linear, left top, left bottom, from(#d90707), to(#ffb882));
background: -webkit-linear-gradient(top, #d90707, #ffb882);
background: -moz-linear-gradient(top, #d90707, #ffb882);
background: -ms-linear-gradient(top, #d90707, #ffb882);
background: -o-linear-gradient(top, #d90707, #ffb882);
padding: 20px 40px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 24px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #ff0000;
background: #ff0000;
color: #ffffff;
}
.button:active {
border-top-color: #ffffff;
background: #ffffff;
}
</style>
</head>
<body>
<p class="button" style="width:80px;">Кнопка
</body>
</html>
Скопируйте себе в любой текстовый файл, переименуйте его в file.html и запустите. Собственно, всё. Меняя буквы и цифры, которые расположены после двоеточий в коде (типа такого #d90707) — вы сможете менять цвета и размеры элементов этой кнопки.
Некоторые возникшие вопросы и ответы
Итак. Несколько слов о том, где и как это используется.
- Обычно кнопки должны сподвигнуть пользователя что-то сделать.
- Поэтому при нажатии на кнопку должна быть какая-то обработка действия.
Логика такая:
1. Делаем у себя на сайте ссылку на другую страницу, по которой нам очень важно, чтобы человек перешёл
2. Потом смотрим на код этой ссылки. Код будет выглядеть примерно так:
<a href='https://aleksandr-krylov.ru'>перейти на сайт</a>
А в тексте это будет просто обычная подчёркнутая ссылка «перейти на сайт»
3. Мы же хотим, чтобы эти слова были большой красной кнопкой, поэтому в код ссылки добавляем вот это:
class="button" style="width:80px;"
Получается:
<a class="button" style="width:80px;" href='https://aleksandr-krylov.ru'>перейти на сайт</a>
То есть мы передаём браузеру инструкцию: ссылке присвоить оформление класса button и стиль с шириной 80 пикселей
4. Браузеру же нужно это изобразить. А инструкция о том, как это сделать находится в коде между строками:
<style>
Тут код
</style>
Поэтому просто копируем этот код вместе с
<style> Тут код </style>
и вставляем себе на страничку между тегами (строками)
<head>
</head>
5. В итоге получаем
<head>
<style>
Тут код
</style>
</head>
<body>
<a class="button" style="width:80px;" href='https://aleksandr-krylov.ru'>перейти на сайт</a>
<body>
За размеры кнопки отвечает вот эта строка в тексте страницы:
<p class="button" style="width:80px;">Кнопка.
Уменьшая значение width, вы будете уменьшать саму кнопку и текст зрительно будет всё шире и шире
Второй вариант — делать сам текст больше, тогда можно изменять параметр font-size: 24px; этот параметр меняет размер шрифта.
Если же вам хочется, чтобы всё осталось точно таким же (размер шрифта и размер кнопки), тогда нужно увеличивать расстояние (интервал) между буквами в слове.
Тогда нужно будет написать так:
<p class="button" style="width:80px; letter-spacing: 5px;">Кнопка
Именно этот параметр letter-spacing: 5px; будет отвечать за расстояние между буквами в html, и именно вот эту величину 5px нужно менять в большую или меньшую сторону.
Здравствуйте! Подскажите пожалуйста, как выровнять текст по ширине кнопки, представленной вами в данном материале?
Олег, доброе утро. Сейчас дополню статью
а вот еще такой вопрос:)))А куда эту кнопочку можно вставить у себя на сайте?:)Где она появится?
Сейчас дополню заметку )