Animate button click and color - Photoshop

JackHudgins
March 7, 2018
282 views
6 votes
6 Answers

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;
}

Answers

- Melchia
- March 7, 2018 at 11:47 pm
- 0 votes
0
You just want to alternate between two colors using the DOM:
```
        button.onclick = function () {
           const color = document.getElementById(id).style.backgroundColor;
           if (color =="green") document.getElementById(id).style.backgroundColor ="red";
else  document.getElementById(id).style.backgroundColor ="green";
    }
```
Login or Signup to reply.

You don’t need JavaScript you can use css:

 .button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

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:

// for normal button
var button = document.querySelector('.button');
button.style['background-color'] = "green"; // or button.style.backgroundColor
button.onclick = function () {
  console.log(this.style['background-color']);  // or this.style.backgroundColor
  if (this.style['background-color'] == 'green') {
    this.style.backgroundColor = 'red';
  }
  else {
    this.style.backgroundColor = 'green';
  }
}

//for image button
const imageStyles = ['saturate', 'grayscale', 'invert'];
var imageIndex = 0;
document.querySelector('.imgbutton').onclick = function() {
  console.log(this.className);
  this.className =imageStyles[imageIndex++%imageStyles.length];
}

.button {
  width: 100px;
  height: 50px;
  background-color: green;
  color: white;
  text-align:center;
  line-height:50px;
  border-radius: 30px;
}

.button:hover {
  cursor: pointer;
  cursor: hand;
}

.saturate { 
  filter: saturate(4); 
}
.grayscale {
  filter: grayscale(90%); 
}

.invert { 
  filter: invert(90%); 
}

input[type="checkbox"]:checked ~ svg circle:nth-child(1) {
  fill: black;
}
input[type="checkbox"]:checked ~ svg circle:nth-child(2) {
  fill: yellow;
}

<table>
<tr>
<td>

<a class="button">Click me</a>
<img style="width:100px;" src="https://i.stack.imgur.com/61NAY.png" class="imgbutton" alt="Click Me" title="click me!"/>

<label>
 <input type="checkbox" style="display:none"/>
 <svg width="100" height="100">
   <circle id="circle1" cx="50" cy="50" r="40" stroke="#8dbab1" stroke-width="9" fill="#eaf2f0"></circle>
   <circle id="circle2" cx="50" cy="50" r="20" stroke="#edf9f5" stroke-width="2" fill="#d1d6d4"></circle>
 </svg> 
</label>
</td>
</tr>
</table>

Here is an idea how you can create this button using CSS then you can easily adjust color, dimension, apply smooth effect, animation, etc:

.button {
  display: inline-block;
  margin: 20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at top, #f2f2f2, #ccc, #b3b3b3);
  position: relative;
  border: 12px solid #96c9b9;
  cursor: pointer;
  transition:0.5s;
}

.button:before {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 22%;
  left: 22%;
  border-radius: 50%;
  border:1px solid #cecece;
  background: radial-gradient(circle at bottom, #f2f2f2, #ccc, #aaa);
}

.button:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  left: -1px;
  border-radius: 50%;
  border: 1px solid #b4b4b4;
  box-shadow: 0px 6px 9px #757373;
}

.button:hover {
 border-color:#9fdecb;
}

<div class="button"></div>

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.

/* hide the native element */
.your-button input {
  opacity: 0;
}

/* disable user selection */
.your-button,
.your-button * {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* The grey button */
your-button-elem {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 80%));
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 6px 6px hsla(0, 0%, 0%, 0.3);
  transition: 60ms;
}

/* The colored status ring */
your-button-elem::before {
  content: '';
  position: absolute;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  background: hsl(162, 0%, 69%);
  border-radius: 50%;
  box-shadow: inset 0 0 4px hsla(0, 0%, 0%, 0.3);
  z-index: -1;
}

/* The dimple ontop of the button */
your-button-elem::after {
  content: '';
  position: absolute;
  top: 26px;
  right: 26px;
  bottom: 26px;
  left: 26px;
  background: linear-gradient(hsl(0, 0%, 80%), hsl(0, 0%, 98%));
  border-radius: 50%;
  box-shadow: inset 0 1px 6px hsla(0, 0%, 0%, 0.3);
}

/* The checked state */
input:checked ~ your-button-elem::before {
  background: hsl(162, 52%, 69%);
}

/* The pressed state */
input:active ~ your-button-elem,
your-button-elem:active {
  box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.3);
}

/* The focused state */
.your-button input:focus {
  outline: none;
}
input:focus ~ your-button-elem::before {
  box-shadow: inset 0 0 4px hsla(0, 0%, 0%, 0.3),
                    0 0 0 4px hsla(200, 100%, 50%, 0.3);
}
input:focus ~ your-button-elem:hover::before {
  box-shadow: inset 0 0 4px hsla(0, 0%, 0%, 0.3);
}


/***** Setup *******************/
* { margin:0; padding:0 }
html, body { height:100% }
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<label class="your-button">
    <input type="checkbox">
    <your-button-elem></your-button-elem>
</label>

	function btnclick() {
			var glow = document.getElementById("gldiv");
			var dimp = document.getElementById("dimple");
			var d = document.getElementById("dlght")
			if (dimp.style.display == "block") {
				glow.style.background = "#c9969d";
				dimp.style.display = "none";
				d.style.display = "none";
			}
			else {
				glow.style.background = "#96c9b9";
				dimp.style.display = "block";
				d.style.display = "block";
			}
		}

	body {
			overflow-x: hidden;
			background: #e7dede;
		}
		
		.mainbg {
			background: #e7dede;
			padding: 20px;
		}
		
		.gdiv {
			width: 100%;
			height: 100%;
			border-radius: 50px;
			background-color: #fff0;
			padding: 10px;
			transition: .5s all ease;
		}
		
		.glowdiv {
			margin: 100px auto;
			width: 100px;
			height: 100px;
			background: #c9969d;
			box-shadow: inset 0px 0px 3px #00000055;
			border-radius: 50px;
			transition: .5s all ease;
		}
		
		.gdiv:hover {
			background-color: #fff3;
		}
		
		.btninshadow {
			box-shadow: inset -1px -1px 3px #6d81a5;
			width: 100%;
			height: 100%;
			border-radius: 50px;
			padding: 15px;
		}
		
		.btndiv {
			height: 100%;
			width: 100%;
			background: linear-gradient(115deg, #f3f3f7, #b1bace);
			border-radius: 50px;
			box-shadow: -1px 3px 10px #00000099;
		}
		
		.btndimple {
			height: 100%;
			width: 100%;
			background: linear-gradient(115deg, #f3f3f7, #b1bace);
			border-radius: 50px;
			box-shadow: inset 2px 2px 3px #6d81a5cc;
			display: none;
			transition: .5s all ease;
		}
		
		.btndimlgt {
			width: 100%;
			height: 100%;
			box-shadow: 0px 0px 3px #fff;
			border-radius: 50px;
			display: none;
			transition: .5s all ease;
		}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">	
</head>
<body>
	<div class="mainbg">
		<div class="glowdiv" id="gldiv">
			<div class="gdiv">
				<div class="btndiv" onclick="btnclick();">
					<div class="btninshadow">
						<div class="btndimlgt" id="dlght">
							<div class="btndimple" id="dimple"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Animate button click and color – Photoshop

Answers