Can it be done? CSS on click <button>

[Cabbit]

http://95.128.131.122:3000/

Working on a project just now its a app for a NHS training unit as part of my 3rd year group project in uni.
Now i've designed the main interface to work on the iPad(simulator so far) as this is the device there going to be using.

So my question is mainly relating to buttons using the <button> tag and styled with css. I have no idea and have found little information how to make style the onclick part of the button with css.

With a links it would be hover, active, focus but i dinny see anything similar for buttons.

 

[7on]

:active should work, but support isn't universal. Which browser are you previewing in?

 

[jpyc7]

:active should work, but support isn't universal. Which browser are you previewing in?

Must be Safari, don't you think on an iPad simulator?

 

[Cabbit]

Hmm active does not seem to work. This is my current CSS

button{
    float: right;
    margin-top: 1em;
    margin-right: 0.6em;
    font-size: 1.2em;
    display: inline-block;
    color: #eee;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9dc7f0), to(#4397ec), color-stop(.6,#4397ec));
    padding:5px 15px 6px 15px;
    font-weight:bold;
    border:1px solid rgba(0,0,0,0.3);
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
}

 

[7on]

Are you trying to change the background on button:active? Try seeing if just a solid color change works (i.e. background:#fff to background:#000 ). I haven't used too much css gradient work myself, but try to see if that's the issue.

edit: if that doesn't work, try using an input tag instead of button. Just got that to work on an input type="submit" on my end, but haven't tried with button.

 

[spooky69]

You can add a class to the button (<button class="submitButton">Link Text</button>) and then style the pseudo - .submitButton:hover {etc - just use a sliding door technique to position the single background image for the desired behaviour. Hope that makes sense and is what you are looking for.

 

[Cabbit]

You can add a class to the button (<button class="submitButton">Link Text</button>) and then style the pseudo - .submitButton:hover {etc - just use a sliding door technique to position the single background image for the desired behaviour. Hope that makes sense and is what you are looking for.

Thanks that way worked terrifically using button.submitButton and button. submitButton:active i can now change things like what is looks like on click.

 

[spooky69]

Glad it worked for you. The button tag is nice as you can simply chuck an image between the tags with the button text for those really cool buttons with icons in them, such as a login button having a key icon on it, etc.