Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Creating a button / meter

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 16, 2014 at 6:51 am #160513
    alanjdoolan
    Participant

    I have used the tutorial https://css-tricks.com/css3-progress-bars/ to display a percentage amount of a total which changes colour the lower it goes. This works fine. However I now want to also have it as a button but rather than just making this into a button I want to take a button element and have it work in a similar way. So it is a particular colour treating the full width of the button as 100% and moving left along it until it is empty.

    Any suggestions on how I could achieve this? Trying to avoid javascript if at all possible.

    January 16, 2014 at 7:17 am #160515
    Paulie_D
    Member

    I don’t understand.

    Why would a button show progress?

    What have you tried so far, we aren’t here to do it all for you?

    January 16, 2014 at 7:19 am #160516
    Paulie_D
    Member

    Oh, and if it is intended to actually represent progress you will need javascript to get the values.

    You might want to review Chris Coyier recent article on buttons.

    January 16, 2014 at 7:25 am #160518
    alanjdoolan
    Participant

    sorry, I think I’ve confused things. It’s not a progress, it’s just a meter to display the percentage of something. What it’s used for is a cart that I want to display the remaining items so it doesn’t need to change dynamically

    January 16, 2014 at 8:10 am #160524
    Paulie_D
    Member

    it’s just a meter to display the percentage of something.

    Still not something a button should be used for.

    What it’s used for is a cart that I want to display the remaining items so it doesn’t need to change dynamically

    So where will it get the value from?

    January 16, 2014 at 9:56 am #160532
    alanjdoolan
    Participant

    Why shouldn’t it be used for that? It’s a dual purpose. It tells you availability and allows you to purchase.

    Currently I have the values in a php array. The total, the sold and the percentage left.

    January 16, 2014 at 10:07 am #160533
    Paulie_D
    Member

    Fair enough…you seem determined.

    Just use the techniques given in the article https://css-tricks.com/css3-progress-bars/ to a style a <button> element or an <input>

    Quite what you expect the difference to be, I’m not sure…and any functionality will require some JS.

    https://css-tricks.com/use-button-element/

    January 16, 2014 at 10:15 am #160534
    alanjdoolan
    Participant

    I’ll give it a go. If it doesn’t work or is stupid I’ll remove it but won’t know till I try.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.