https://i.sstatic.net/61NAY.png
I designed this button using Photoshop. While I have experience in graphic UI design, my knowledge of coding is limited to Python and HTML/CSS.
My plan was to use JavaScript to animate the button when clicked and change its color. However, being a beginner, I'm unsure of what steps to take next. Should I create the button entirely with code instead of Photoshop?
Alternatively, should I create separate images for different colors and switch between them? I'm concerned that this method may result in a choppy transition when the button is clicked. This project involves designing a dashboard GUI web app, and I initially tried creating a simple color-changing button using only code, but now I feel stuck. It's surprising to me that there isn't much information available on combining Photoshopped designs with code for UI creation and animation.
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;
}