炫酷圆形按钮调色器

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>圆形按钮颜色控制器</title>

<style>

body {

font-family: 'Arial', sans-serif;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

}

.container {

text-align: center;

background: white;

padding: 30px;

border-radius: 10px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

width: 300px;

}

.display-button {

width: 40px;

height: 40px;

border-radius: 50%;

margin: 20px auto;

background-color: #cccccc;

border: none;

cursor: default;

transition: all 0.3s ease;

box-shadow:

0 4px 8px rgba(0, 0, 0, 0.1),

inset 0 0 10px rgba(0, 0, 0, 0.1);

}

.control-buttons {

display: flex;

justify-content: space-between;

margin-top: 20px;

}

.control-button {

padding: 10px 15px;

border: none;

border-radius: 5px;

cursor: pointer;

font-weight: bold;

color: white;

transition: all 0.2s ease;

}

.control-button:hover {

transform: translateY(-2px);

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

.control-button:active {

transform: translateY(0);

}

#button1 {

background-color: #e74c3c;

}

#button2 {

background-color: #e67e22;

}

#button3 {

background-color: #2ecc71;

}

/* 状态类 */

.red {

background-color: #e74c3c !important;

box-shadow:

0 4px 12px rgba(231, 76, 60, 0.4),

inset 0 0 10px rgba(0, 0, 0, 0.1) !important;

}

.orange {

background-color: #e67e22 !important;

box-shadow:

0 4px 12px rgba(230, 126, 34, 0.4),

inset 0 0 10px rgba(0, 0, 0, 0.1) !important;

}

.green {

background-color: #2ecc71 !important;

box-shadow:

0 4px 12px rgba(46, 204, 113, 0.4),

inset 0 0 10px rgba(0, 0, 0, 0.1) !important;

}

</style>

</head>

<body>

<div class="container">

<h2>按钮颜色控制器</h2>

<button class="display-button" id="displayBtn"></button>

<div class="control-buttons">

<button class="control-button" id="button1">红色</button>

<button class="control-button" id="button2">橙色</button>

<button class="control-button" id="button3">绿色</button>

</div>

</div>

<script>

// 获取DOM元素

const displayBtn = document.getElementById('displayBtn');

const button1 = document.getElementById('button1');

const button2 = document.getElementById('button2');

const button3 = document.getElementById('button3');

// 移除所有颜色类

function resetColors() {

displayBtn.classList.remove('red', 'orange', 'green');

}

// 按钮事件监听

button1.addEventListener('click', function() {

resetColors();

displayBtn.classList.add('red');

displayBtn.textContent = "红色状态";

});

button2.addEventListener('click', function() {

resetColors();

displayBtn.classList.add('orange');

displayBtn.textContent = "橙色状态";

});

button3.addEventListener('click', function() {

resetColors();

displayBtn.classList.add('green');

displayBtn.textContent = "绿色状态";

});

</script>

</body>

</html>

运行效果:

相关推荐
浮生若茶80887 分钟前
Flutter环境搭建全攻略之-windows环境搭建
前端·vscode·flutter
飞天小蜈蚣28 分钟前
python - ( js )object对象、json对象、字符串对象的相关方法、数组对象的相关方法、BOM对象、BOM模型中 Navigator 对象
javascript·python·json
小光学长1 小时前
基于vue驾校管理系统的设计与实现5hl93(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
!win !2 小时前
我的后台管理项目报Error: spawn …esbuild.exe ENOENT了
前端·爬坑
wow_DG2 小时前
【前端面试题✨】Vue篇(一)
前端·javascript·vue.js
充气大锤2 小时前
基于高德地图实现后端传来两点坐标计算两点距离并显示
前端·javascript·html·gis·高德地图
Aphasia3112 小时前
fetch、axios和Ajax
前端·面试
@PHARAOH2 小时前
HOW - 在浏览器下载一个 Excel 表格文件
前端·excel
GIS之路3 小时前
GDAL 下载安装
前端