@Adexs

Создание кнопки на CSS — какие стили оптимальнее?

Из моих познаний - кнопку можно создать (конкретно на основе тега "а" )с помощью padding-top, padding-right / width для горизонтальных размеров;
height / padding-top, padding-bottom / line-height для вертикальных. Какое сочетание наиболее оптимизированное и адаптивное?
  • Вопрос задан
  • 381 просмотр
Решения вопроса 3
sharomet
@sharomet
Front-End
a.btn {
display:inline-block;
padding:10px 15px;
font-size:14px;// можно другой
text-decoration:none;
background-color: на ваше усмотрение
color: тоже самое;
border:1px soled #112233// если нужна обводка

}
a.btn:hover {// по наведению
background-color: на ваше усмотрение
color: тоже самое
}
Ответ написан
Комментировать
evgeniy8705
@evgeniy8705
Повелитель вселенной
Demo

Главное при стилизации ссылки под кнопку, необходимо указать
display: block; // так как по умолчанию ссылка является inline элементом...
// иначе, применение некоторых стилей не будет применено.

d314f058d96344b59cfe11ca3ab08ee2.png
Ответ написан
Комментировать
@cssfish
Плохое знание основ - причина больших бед
можно писать стили для условного класса .button так, чтобы они работали и для A, и для BUTTON, и даже для INPUT (с type = button) одинаково. Хотя, конечно, сейчас такое оформление бывает, что инпуту все детали не прикрутишь, ну да и ладно - ссылки или button должно хватить для всего. А далее в верстке/на проекте применяешь с этим классом нужный тэг по вкусу/желанию/назначению.

а насчет с помощью какие правил делать - так зависит от задачи. "просто кнопке" хватит паддингов, если кнопку надо ровнять по высоте с инпутами или еще чем - надо фиксировать высоту. всегда - от задачи.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@Froggyweb
Button. А вы пытаетесь переделать ссылку она кстати вообще никак не связана с кнопкой. Можно и спан использовать с тем же успехом и див. Подчеркивание не надо будет убирать
Ответ написан
Комментировать
vita78ru
@vita78ru
Graphic Designer - Animator
В интернете очень много примеров уже оформленных кнопок. Вот первый, из понравившихся мне:

https://html5book.ru/krasivye-knopki-dlya-sayta/ - тут код

https://html5book.ru/examples/styling-buttons/demo... - тут можно потыкать потестить
Ответ написан
Комментировать
@kulaeff
Front-end developer
А в чем цимес использовать ссылку как кнопку? Вы в курсе, чем отличается кнопка от ссылки или вы просто криво сформулировали вопрос? Если вам нужна именно кнопка (кнопка вызывает некое действие), то нужно юзать тег <button> и его стилизовать. Если вам нужна ссылка, которая ведет на другую страницу или ресурс и которая выглядит как кнопка, то да, нужно использовать тег <a> и стилизовать ее. Выражение "кнопку можно создать на основе тега a" некорректно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы