Can it be done? CSS on click <button>

Discussion in 'Web Design and Development' started by Cabbit, Apr 26, 2010.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    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.
     
  2. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #2
    :active should work, but support isn't universal. Which browser are you previewing in?
     
  3. jpyc7 macrumors 6502

    Joined:
    Mar 8, 2009
    Location:
    Denver, CO
    #3
    Must be Safari, don't you think on an iPad simulator?
     
  4. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #4
    Hmm active does not seem to work. This is my current CSS

    HTML:
    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);
    }
    
     
  5. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #5
    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.
     
  6. spooky69 macrumors member

    Joined:
    Jan 18, 2010
    #6
    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.
     
  7. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #7
    Thanks that way worked terrifically using button.submitButton and button. submitButton:active i can now change things like what is looks like on click.
     
  8. spooky69 macrumors member

    Joined:
    Jan 18, 2010
    #8
    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.
     

Share This Page