I made this button in Photoshop. I have plenty of graphic UI experience, but not much coding besides python and html/css.
I figured I would use javascript to animate the button being clicked and change color. I am very much a beginner and do not know my next step. Such as if I shouldn’t create the button in photoshop but make it from scratch with code?
Or if I make a separate image that’s red and it changes back and forth between images? But I’m not sure if that process would look smooth when it’s clicked. This is all for a dashboard gui web app. I was playing around just trying to get a simple button to change colors using only code but I’m lost. I haven’t been able to find anything related to what I’m doing which I think is crazy because how common UI’s are created in Photoshopped and animated with code.
Javascript
var button = document.querySelector('.button');
button.onclick = function () {
if (backgroundColor == green) {
document.getElementById(id).style.backgroundColor = red";
}
CSS
.button {
&:hover {
background-color: green;
cursor: pointer;
cursor: hand;
}
width: 100px;
height: 50px;
background-color: green;
color: white;
text-align:center;
line-height:50px;
border-radius: 30px;
}
6
Answers
You just want to alternate between two colors using the DOM:
You don’t need JavaScript you can use css:
For normal button, your codes are very closed, just need to fix some syntax issues.
If you’d like to change the color of the image button, you can use the filter of css. But be aware of
css:filter
only being supporeted by mordern browser.Update:
@Temani Afif already implemented one perfect css button, so I considered using SVG to do same thing. It might not be a good solution, just share what I tried.
PS: I don’t have many aesthetics cells, so the SVG looks ugly, lol.
Below is one sample:
Here is an idea how you can create this button using CSS then you can easily adjust color, dimension, apply smooth effect, animation, etc:
I would first attempt to do this with HTML & CSS since it’ll be the easiest to maintain down the line (i.e. need a different size color? just a tweak a value in CSS).
From your description it sounds like you are effectively making a styled checkbox. You want to use semantic elements (i.e. not
<div>
and<span>
) wherever possible to improve the experience for screen readers and keyboard-only users. So create a checkbox in HTML, hide it, then style the element after it based on the value of the hidden checkbox.