I am trying to make heart buttons that switch from full to empty when I click them.
I am a little rusty and need a refresher on buttons, what is a good place to look for that?
Can you be more specific in terms “heart button” and “full to empty?” Are you talking about a color change? An animated effect. Do you mean a button shaped like a heart? Bootstrap already has buttons built into it. Changing their shape is just a matter of changing the CSS. You could even use clipping paths.
I do 99% of my buttons in CSS, or use an icon font (like font awesome), and maybe 1% of my buttons I’ll do as images (PNG or SVG) when something very unusual is required. I prefer CSS for buttons because you can easily add transforms, transitions, change colors, etc with CSS.
Maybe post an example of what you’re trying to do. Something on a website online that we can look at.
I ment to I want to use the front awesome as a button or checkbox.
I’m making a tabletop rpg character sheet for myself and thought instead of having the stat a number it would be fun to use hearts to show how much health the player still had.
I made a little progress with a checkbox. The heart is present but the check box is also present. The heart does not do anything though. Checkbox still does what a check box does.
Yeah, this is still totally vague and I cannot tell exactly what you’re trying to do without seeing some kind of visual example. You can make anything into a button on a website using javascript’s “on click” feature.
The CSS checkbox feature can be used to create action as well. For example, I used it to create the fixed flyout menu on left side of this website that says “Click For 2 Week Free Special.”
https://bustosmartialarts.com/
Are you trying to have it so that you can have multiple hearts with a portion of them filled with a color to denote how much “value” each stat has? Sounds visually neat, but statistically vague (unless they can hover over the heart and have a tooltip that shows an actual number or percentage. (This would almost certainly require javascript.) But if you just want to have it where each heart represents an percentage (example,10 hearts = 100%, 3 hearts = 30%, etc) that would be easier.
But again, without seeing your vision in a more clear manner (like an example where you’ve seen it done before) it’s impossible to advise you further. Either way, it sounds like you’ll need some custom coding done to create this.
Think legend of Zelda.
In this game characters have 10 hp, so each heart would be one hp.
So to show that you have 6 hp, 6 hearts would be full and 4 would be empty hearts.
If you drank a potion you would then checkmark how many hearts you gained back.
I’m a 55 year old website developer. I know as much about Legend of Zelda as you know about Ultima I on the Apple II computer.
Show me a website with an example of what you’re trying to create, and I’ll try to give you an idea of how to do it with BSS.
Its okay, I figured out how to change the checkbox default look into icons.
Thanks for trying to help.
Glad you got it figured out 