Question

我在Photoshop中创建了这个按钮。我有很多图形用户界面体验，但除了python和html / css之外没有太多编码。

我想我会用javascript来动画点击的按钮并改变颜色。我是一个初学者，不知道我的下一步。比如我不应该在photoshop中创建按钮但是从头开始使用代码？

或者，如果我制作一个红色的单独图像，它会在图像之间来回变换？但我不确定这个过程在点击时是否会显得平滑。这是仪表板gui web应用程序的全部内容。我只是试着用一个简单的按钮来改变颜色只使用代码，但我迷失了。我还没有找到任何与我正在做的事情相关的事情，我觉得这很疯狂，因为在Photoshop中创建了常见的用户界面，并且用代码动画了。

的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

我首先尝试用HTML＆amp; CSS因为它最容易维持下线（即需要不同大小的颜色？只需在CSS中调整一个值）。

根据您的描述，听起来您正在有效地制作样式复选框。您希望尽可能使用语义元素（即不是<div>和<span>）来改善屏幕阅读器和仅键盘用户的体验。因此，在HTML中创建一个复选框，隐藏它，然后根据隐藏复选框的值设置后面的元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

以下是如何使用CSS创建此按钮，然后您可以轻松调整颜色，尺寸，应用平滑效果，动画等：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

randomForest()

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您不需要JavaScript，可以使用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

对于普通按钮，您的代码非常封闭，只需修复一些语法问题。

如果您想更改图像按钮的颜色，可以使用css的过滤器。但请注意css:filter仅被现代浏览器所支持。

<强>更新

@Temani Afif已经实现了一个完美的css按钮，所以我考虑使用SVG做同样的事情。它可能不是一个好的解决方案，只是分享我尝试过的东西。

PS：我没有很多美学细胞，所以SVG看起来很难看，哈哈。

以下是一个示例：

// 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

您只想使用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

您已经使用图形编辑器创建了此按钮，因此我建议您使用两个图像，而不是从头开始使用代码创建此按钮。

创建一个将作为按钮的元素：

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

添加CSS，其中包含＆＃39; background-image＆＃39;属性处于非活动状态的按钮图像（第一张图像）：

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

然后为带有更改图像的按钮添加规则（第二张图像）（我添加了类＆＃39;活动＆＃39;用于该purpuse）：

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

最后一件事 - 添加onclick事件以切换按钮图像：

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

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

选中jsfiddle以查看操作中的按钮。

动画按钮单击和颜色

7 个答案: