4

I have three HTML buttons and when I click on them there is no outer glow and they don't do anything.

I have also tryed to style them but they stay with the default design. I have just used ordinary code I just don't have a clue what's wrong with them

<input type="button" value="Proceed">
<input type="button" value="Cancel">
一二三
  • 21,059
  • 11
  • 65
  • 74
Otroberts
  • 347
  • 1
  • 4
  • 7

2 Answers2

3

Don't use , instead use with CSS to create your buttons so they react to touch. It'll require some javascript as even most mobile browsers don't properly map touch events to the CSS :active pseudoclass.

Your "button":

<a class="button" id="yourButton">Button</a>

Some very basic CSS to toggle the background and text color on touch:

a.button {
    color:#fff;
    border:0px;
    padding:5px;
    background:#000;
}

a.button-active {
    background:#fff;
    color:#000;
}

And here's the javascript you would call in your onload on deviceready handler. I'm using xuijs here (xuijs.com), but you can use jQuery or any other javascript to add and remove classes:

x$('.button').on('touchstart', function(e) { 
    x$(e.currentTarget).addClass('button-active'); 
} );
x$('.button').on('touchend', function(e) { 
    x$(e.currentTarget).removeClass('button-active'); 
} );

This is a very basic example. Once you have this all setup, you can make any changes you want to the CSS to determine how the button will look when it is active and inactive.

Tony Lukasavage
  • 1,937
  • 1
  • 14
  • 26
0

Hmmm.. Your question is not that clear. But if you only want a glow in your buttons, you can take a look at how Formalize does it.

Here's a page showing the button glow effect (when pressed).

Update: Oooops, sorry, missed the "PhoneGap" part. The solution I gave above is only for normal html forms, I don't have experience with using phonegap yet. cheers. :)

Mon Noval
  • 280
  • 2
  • 8