Самый элегантный способ сверстать такую кнопку?

Question

[Stepan S.]

Фиддл: jsfiddle.net/Ln5bw878

Answer 1

[Евгений Петров]

codepen.io/cleric/pen/yEpmv

Comments

[Stepan S.]

Круто. Почти то, только осталось активную версию сделать и прорезать шрифтом дырку в кнопку (добавил в скайпе)

[Евгений Петров]

@miloslovesky ну так и доделайте :active сами:)
А вот насчёт прорезки — вам дорога в SVG (clip-path). Но если использовать SVG, то смысла в псевдоэлементах мало — можно фон в SVG и сделать.
А background-clip:text только в webkit работает.

[Евгений Петров]

@miloslovesky без клиппинга текста jsfiddle.net/Ln5bw878/3

[Stepan S.]

@Petroveg Я сделал так: codepen.io/miloslovesky/full/emvEg

Но как в СВГ прорезать без понятия

[Евгений Петров]

@miloslovesky вы сделали?) Ну ок:)
Пара замечаний к вашему труду:

.button{
	display: inline-block;
}

Это зачем? Какой у кнопки display по умолчанию, как вы думаете?

.button{
	text-align: center;
	white-space: nowrap;
}

А это? С учётом второго (и display) первое не имеет смысла. Никакого.

.button{
	cursor: pointer;
}

Вот кто это придумал и продолжает втаскивать в веб?

[Stepan S.]

@Petroveg Да, по-умолчанию именно это стоит. Но не факт, что я захочу применить этот стиль к тегу

[Stepan S.]

button

[Stepan S.]

@Petroveg

.button{
	text-align: center;
	white-space: nowrap;
}

Первой на случай если кнопка у меня будет фиксированной ширины скажем.
А второе понятно зачем

.button{
	cursor: pointer;
}

А почему он должен быть default? Людям удобней pointer, а default для залоченных

[Евгений Петров]

Людям удобней pointer

Давайте результаты исследований. Вот google и yandex кнопки таким правилом не снабжают, а вам нужно. Результаты исследований, и только они.

Первой на случай если кнопка у меня будет фиксированной ширины скажем.

Для фиксированной слишком длинный текст должен обрезаться. А где тогда oveflow и text-oveflow?

Зачем писать то, что не используется сейчас? Если использовать фиксированную ширину, то потребуется не 1, а 3 правила, а этих 2-х правил у вас и нет.

[Stepan S.]

Давайте результаты исследований. Вот google и yandex кнопки таким правилом не снабжают, а вам нужно. Результаты исследований, и только они.

Ну а у Фейсбука поинтер.

Ок. Я даже загуглил. И нашел в спецификации записи о том, что поинтер для ссылок. Но это не отменяет вопрос здравого смысла. Т.е. если я считаю, что в моём случае кнопка не достаточно очевидна, то выделяю её поинтером

[Stepan S.]

@Petroveg

Для фиксированной слишком длинный текст должен обрезаться. А где тогда oveflow и text-oveflow?

Зачем писать то, что не используется сейчас? Если использовать фиксированную ширину, то потребуется не 1, а 3 правила, а этих 2-х правил у вас и нет.

Это уже вопрос кому как удобней работать.

[Евгений Петров]

@miloslovesky это вопрос источника бесполезного кода.

[Stepan S.]

@Petroveg Если для одной кнопки в одном месте, то возможно эти 2 строчки бесполезны

[Stepan S.]

@Petroveg PS Если вам интересны задачи в связке HTML,CSS,JS, то мы могли бы пообщаться в скайпе (stepa_mi)

[Юрий Лобанов]

@miloslovesky отметьте решением, ведь это решение.
@Petroveg а я вот люблю pointer :)

Answer 2

[Олег Войтенко]

а что мешает вам сделать для <a> в стиле бекграунд для неё картинкой? а на ховер повесить картинку такая КА должна быть при наведении?

Comments

[Stepan S.]

Под текстом должен быть виден неоднородный фон