Как можно сделать разный текст кнопки на разных разрешениях?

Question

[Kipsi]

Добрый вечер. У меня есть кнопка в макете на десктопе "Заказать сейчас" , а на мобильном разрешении "Узнать больше". Как можно сверстать этот момент не делая 2 кнопки с двумя разными текстами скрывая одну из них под нужные разрешения?

Comments

[Rustam Bainazarov]

1. Скрипты.
2. Медизапросы (два span с разными текстами, показываете нужный в зависимости от разрешения).

Answer 1

[Иван Павлов]

html:

<button class="mybutton">
  <span class="mobile">Узнать больше</span>
  <span class="desktop">Заказать сейчас</span>
<button>

css:

@media (max-width: 767px) {
  .mybutton .desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .mybutton .mobile {
    display: none;
  }
}

Answer 2

[dom1n1k]

Я бы не переключал два текста на одной кнопке, а сделал бы две разные кнопки.
Ну потому что "Заказать сейчас" и "Узнать больше" - это разные функции и ведут они куда-то в разные места.