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
  • #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.

    #160515
    Paulie_D
    Moderator

    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?

    #160516
    Paulie_D
    Moderator

    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.

    #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

    #160524
    Paulie_D
    Moderator

    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?

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

    #160533
    Paulie_D
    Moderator

    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/

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

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