动画按钮单击和颜色

Question

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

Answer 1

I would first attempt to do this with HTML & CSS since it'll be the easiest to maintain down the line (ie 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 (ie 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> 

Answer 2

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> 

Answer 3

  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> 

Answer 4

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

Answer 5

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> 

Answer 6

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

Answer 7

You've already created this button with graphic editor, so I suggest for you to use two images instead of creating this button from scratch with code.

Create an element which will be your button:

<div id="button"></div>

Add CSS which will include 'background-image' property with your button image in inactive state (the first image):

#button {
  /* Use whichever dimensions you need */
  width: 150px;
  height: 150px;
  cursor: pointer;
  background-image: url('https://s14.postimg.org/ofp7n3d41/btn1.png');
  background-size: contain;
  background-repeat: no-repeat;
  /* Using for smooth transition between images */
  transition: background-image 0.4s ease; 
}

Then add rules for button with changed image (the second image) (I added class 'active' for that purpuse):

#button.active {
  background-image: url('https://s14.postimg.org/6pnj2278x/btn2.png');
}

And the last thing - add onclick event to toggle button image:

var button = document.getElementById('button');

button.onclick = function() {
  button.classList.toggle('active');
}

Check jsfiddle to see button in action.