Сделать кнопку активной на мобильном телефоне?

Question

Когда пользователь нажимает на кнопку ...

#featured-challenge-button { 
    background-color: #446CB3; 
    box-shadow: 3px 3px 5px black; 
    &:hover { 
    background-color: #ccac00; 
    box-shadow: none; 
    } 
    &:active { 
    background-color: #ccac00; 
    box-shadow: none; 
    } 
    &:focus { 
    background-color: #ccac00; 
    box-shadow: none; 
    } 
} 

Кнопка Примеры:

# link_to 
<%= link_to next_challenge_path, class: "btn", id: "featured-challenge-button" do %> 
    <span class="glyphicon glyphicon-plus"></span> 
<% end %> 

# submit 
<%= button_tag(type: 'submit', class: "btn", id: "featured-challenge-button") do %> 
    Save 
<% end %> 

как я могу показать, что он сразу же нажал?

В браузере это работает, но на моем iPhone не действует на кнопку при нажатии. Единственным признаком нажатия кнопки была панель загрузки в верхней части экрана.

Я использую :active неправильно или есть другой метод CSS или есть решение для javascript?

Answer 1

На кнопке необходимо использовать событие ontouchstart. Просто используйте

ontouchstart="" на вашем элементе и :active будет работать.

<button ontouchstart="">An Example</button>