Кнопка для сайта на CSS
Кнопка — важный элемент на веб-странице. Я не буду говорить о том, что кнопки должны подходить под стилистику сайта, и что нет готовой кнопки, которая подошла бы всем — все это вы и так знаете. Я хочу разобрать один из вариантов кнопки и посмотреть на результаты.
Для чистоты эксперимента я убрал некоторые CSS-стили, и получился самый простой вариант кнопки, чтобы посмотреть на её обычный вид. Ниже приведён пример HTML+CSS.
HTML
CSS
.link-button1 {
width: 140px; /* Ширина кнопки */
height: 40px; /* Высота кнопки */
display: block; /* Определяет тип отображения */
border: 1px solid #8db600; /* Граница и её цвет */
}
.link-button1 a {
display: inline-table; /* Определяет тип отображения */
text-decoration: none; /* Дополнительное оформление текста */
cursor: pointer; /* Устанавливает форму курсора */
height: 100%; /* Задает высоту любому блочному или строчно-блочному элементу */
width:100%; /* Задает ширину любому блочному или строчно-блочному элементу */
}
.link-button1 a b {
margin: 0 auto; /* Определяет внешний отступ */
display: table-cell; /* Определяет тип отображения */
vertical-align: middle; /* Выравнивает текстовые элементы */
color: #000000; /* Цвет текста */
font-family: Arial, sans-serif; /* Шрифт */
font-size: 16px; /* Размер шрифта */
text-align: center; /* Текст по центру */
}
Простой вариант кнопки выглядит следующим образом:
Неплохо было бы ещё закруглить углы и назначить цвет кнопке.
Для этого нам нужно свойство border-radius, которое
закругляет углы, и свойство
background-color для
цвета кнопки. Изменим наш CSS-стиль и назовём его
link-button2 (не забудьте в HTML заменить на class="link-button2").
CSS
.link-button2 {
width: 140px; /* Ширина кнопки */
height: 40px; /* Высота кнопки */
display: block; /* Определяет тип отображения */
border: 1px solid #8db600; /* Граница и её цвет */
border-radius: 4px; /* Закругляет углы */
background-color: #afce71; /* Цвет кнопки */
}
.link-button2 a {
display: inline-table; /* Определяет тип отображения */
text-decoration: none; /* Дополнительное оформление текста */
cursor: pointer; /* Устанавливает форму курсора */
height: 100%; /* Задает высоту любому блочному или строчно-блочному элементу */
width:100%; /* Задает ширину любому блочному или строчно-блочному элементу */
}
.link-button2 a b {
margin: 0 auto; /* Определяет внешний отступ */
display: table-cell; /* Определяет тип отображения */
vertical-align: middle; /* Выравнивает текстовые элементы */
color: #000000; /* Цвет текста */
font-family: Arial, sans-serif; /* Шрифт */
font-size: 16px; /* Размер шрифта */
text-align: center; /* Текст по центру */
}
Теперь наша кнопка выглядит «повеселее»), а всего лишь добавили два свойства.
Ну и последний штрих, так сказать. Подчеркнём нашу кнопку тенью, в этом нам поможет свойство
box-shadow. А также при наведении на кнопку будет меняться
её цвет. Финальный CSS-стиль будет называться link-button3
(не забудьте в HTML заменить на class="link-button3").
CSS
.link-button3 {
width: 140px; /* Ширина кнопки */
height: 40px; /* Высота кнопки */
display: block; /* Определяет тип отображения */
border: 1px solid #8db600; /* Граница и её цвет */
border-radius: 4px; /* Закругляет углы */
background-color: #afce71; /* Цвет кнопки */
box-shadow: 0px 2px 4px gray; /* Тень */
}
.link-button3 a {
display: inline-table; /* Определяет тип отображения */
text-decoration: none; /* Дополнительное оформление текста */
cursor: pointer; /* Устанавливает форму курсора */
height: 100%; /* Задает высоту любому блочному или строчно-блочному элементу */
width:100%; /* Задает ширину любому блочному или строчно-блочному элементу */
}
.link-button3 a b {
margin: 0 auto; /* Определяет внешний отступ */
display: table-cell; /* Определяет тип отображения */
vertical-align: middle; /* Выравнивает текстовые элементы */
color: #000000; /* Цвет текста */
font-family: Arial, sans-serif; /* Шрифт */
font-size: 16px; /* Размер шрифта */
text-align: center; /* Текст по центру */
}
.link-button3:hover { /* При наведении на кнопку изменится её цвет */
background: #8db600; /* Цвет кнопки при наведении*/
border: 1px solid #69830f; /* Граница и её цвет */
text-decoration: none; /* Дополнительное оформление текста */
}
Хороший результат.
Резюмирую: все результаты удовлетворительны, каждая кнопка подойдёт под определённую стилистику сайта. Если вам нужны CSS-стили, то вы их можете скачать в разделе «Файлы».