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

Question

[Adexs]

Из моих познаний - кнопку можно создать (конкретно на основе тега "а" )с помощью padding-top, padding-right / width для горизонтальных размеров;
height / padding-top, padding-bottom / line-height для вертикальных. Какое сочетание наиболее оптимизированное и адаптивное?

Answer 1

[gleendo]

Demo

Главное при стилизации ссылки под кнопку, необходимо указать

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

Answer 2

[cssfish]

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

а насчет с помощью какие правил делать - так зависит от задачи. "просто кнопке" хватит паддингов, если кнопку надо ровнять по высоте с инпутами или еще чем - надо фиксировать высоту. всегда - от задачи.

Answer 3

[Froggyweb]

Button. А вы пытаетесь переделать ссылку она кстати вообще никак не связана с кнопкой. Можно и спан использовать с тем же успехом и див. Подчеркивание не надо будет убирать

Answer 4

[Виктория Ясинюк]

В интернете очень много примеров уже оформленных кнопок. Вот первый, из понравившихся мне:

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

https://html5book.ru/examples/styling-buttons/demo... - тут можно потыкать потестить

Answer 5

[kulaeff]

А в чем цимес использовать ссылку как кнопку? Вы в курсе, чем отличается кнопка от ссылки или вы просто криво сформулировали вопрос? Если вам нужна именно кнопка (кнопка вызывает некое действие), то нужно юзать тег <button> и его стилизовать. Если вам нужна ссылка, которая ведет на другую страницу или ресурс и которая выглядит как кнопка, то да, нужно использовать тег <a> и стилизовать ее. Выражение "кнопку можно создать на основе тега a" некорректно.

Comments

[gleendo]

kulaeff

Выражение "кнопку можно создать на основе тега a" некорректно.

Корректно в некоторых случаях. К тому же по новому стандарту, как бы это странно не было, ссылка не обязана иметь href (UPD. но это уже будет не ссылка, браузер будет рассматривать ее как обычный строчный элемент, на подобии span).
К тому же использовать ссылку можно и не перенаправляя пользователя на другой ресурс. Ту же кнопку, которая вызывает всплывающее окно, лучше делать ссылкой, аргументируя это тем, что при каком либо сбое загрузки js, пользователь будет перенаправлен на другую страницу (например на страницу входа, в случае если вызывается всплывающее окно, чтобы пользователь авторизовался), в ином случая нажатие на кнопку просто не будет срабатывать.
Важно понимать где именно использовать ссылку а где button.

[kulaeff]

iamevg_, собсно, ваши слова не противоречат моим. Я говорил, что нужно использовать ссылку как кнопку, если она ведет на другую страницу или ресурс. Сюда входят и всплывающие окна. Однако, меня больше интересует фраза "при каком либо сбое загрузки js": о каком сбое речь? Если мы грузим страницу, за ней подтягиваются скрипты, указанные на этой странице, с того же домена, то вероятность того, что страница загрузилась, а потом инет отвалился и скрипты уже не подгрузились, минимальная. Я бы о таких мелочах не парился. Если речь о загрузке скрипта с какого-нить CDN, то и тут вероятность мала. Лучше уж вообще не использовать CDN.

[gleendo]

kulaeff,

Выражение "кнопку можно создать на основе тега a" некорректно.

Я о том, что как раз таки это ваше выражение некорректно.

Я говорил, что нужно использовать ссылку как кнопку, если она ведет на другую страницу или ресурс. Сюда входят и всплывающие окна.

Не каждый поймет что вы еще включите в ваше выражение...О всплывающих окнах в вашем ответе ничего не было.
В общем смысла дискуссировать не вижу, закроем тему, лень уже отвечать всем...