Make button active on mobile?

Question

When a user clicks a button...

#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; 
  }
}

Button Examples:

# 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 %>

how can I show that it is immediately pressed?

On the browser it works, but on my iPhone there is no effect on the button upon being clicked. The only indication that the button was clicked is the loading bar on the top of the screen.

Am I using :active wrong or is there another CSS technique or is there a javascript solution?

Possible duplicate of [:active pseudo-class doesn't work in mobile safari](http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) — GG., Dec 14 '16 at 06:32

score 9 · Accepted Answer · answered Dec 14 '16 at 06:31

9

You need to use ontouchstart event on the button. Simply use

ontouchstart="" on your element and :active will work.

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

answered Dec 14 '16 at 06:31

Suren Srapyan

66,568
14
114
112

1

Do you know how I could integrate with ruby? Updated question. Trying to figure it out on my own right now, but if u know it I'd appreciate it :) – AnthonyGalli.com Dec 14 '16 at 06:45
@AnthonyGalli.com actually you don't need to change your question from html/js to ruby. You had to open a new question. What about Ruby, sorry I don't know Ruby – Suren Srapyan Dec 14 '16 at 06:47

Make button active on mobile?

1 Answers1