动画按钮点击和颜色
Animate button click and color
我在 Photoshop 中制作了这个按钮。我有丰富的图形 UI 经验，但除了 python 和 html/css 之外没有太多编码经验。
我想我会使用 javascript 为被点击的按钮制作动画并改变颜色。我是一个初学者，不知道我的下一步。比如我不应该在 photoshop 中创建按钮，而是用代码从头开始制作它？
或者如果我制作一个单独的红色图像并且它在图像之间来回变化？但是我不确定单击时该过程是否看起来很顺利。这就是仪表板 gui web 应用程序的全部内容。我一直在玩耍，只是想获得一个简单的按钮来仅使用代码来更改颜色，但我迷路了。我一直无法找到与我正在做的事情相关的任何事情，我认为这很疯狂，因为 UI 是在 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;
}
您只想使用 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";
}
你不需要 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);
}
对于普通按钮，您的代码非常封闭，只需要修复一些语法问题。
如果您想更改图像按钮的颜色，可以使用 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>
这是一个想法，您可以使用 CSS 创建此按钮，然后您可以轻松调整颜色、尺寸、应用平滑效果、动画等：
.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>
我会首先尝试使用 HTML & CSS 来做到这一点，因为它最容易维护（即需要不同尺寸的颜色？只需调整一个值CSS).
根据您的描述，您似乎正在有效地制作一个带样式的复选框。您希望尽可能使用语义元素（即不是 <div> 和 <span>）来改善屏幕阅读器和 keyboard-only 用户的体验。因此，在 HTML 中创建一个复选框，将其隐藏，然后根据隐藏复选框的值设置其后的元素样式。
/* 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>
我在 Photoshop 中制作了这个按钮。我有丰富的图形 UI 经验，但除了 python 和 html/css 之外没有太多编码经验。
我想我会使用 javascript 为被点击的按钮制作动画并改变颜色。我是一个初学者，不知道我的下一步。比如我不应该在 photoshop 中创建按钮，而是用代码从头开始制作它？
或者如果我制作一个单独的红色图像并且它在图像之间来回变化？但是我不确定单击时该过程是否看起来很顺利。这就是仪表板 gui web 应用程序的全部内容。我一直在玩耍，只是想获得一个简单的按钮来仅使用代码来更改颜色，但我迷路了。我一直无法找到与我正在做的事情相关的任何事情，我认为这很疯狂，因为 UI 是在 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;
}
您只想使用 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";
}
你不需要 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);
}
对于普通按钮，您的代码非常封闭，只需要修复一些语法问题。
如果您想更改图像按钮的颜色，可以使用 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>
这是一个想法，您可以使用 CSS 创建此按钮，然后您可以轻松调整颜色、尺寸、应用平滑效果、动画等：
.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>
我会首先尝试使用 HTML & CSS 来做到这一点，因为它最容易维护（即需要不同尺寸的颜色？只需调整一个值CSS).
根据您的描述，您似乎正在有效地制作一个带样式的复选框。您希望尽可能使用语义元素（即不是 <div> 和 <span>）来改善屏幕阅读器和 keyboard-only 用户的体验。因此，在 HTML 中创建一个复选框，将其隐藏，然后根据隐藏复选框的值设置其后的元素样式。
/* 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>