色彩的舞动：探索梦幻按钮搭配

编程

发布日期: 2025-02-23

更新日期: 2025-02-23

文章字数: 1.1k

阅读时长: 6 分

分享几组好看的颜色搭配

源码如下：
【珊瑚薄荷】
【紫晶日光】
【碧玉霓虹】【暖阳晴空】【绯红罗兰】【天青柠光】
【紫晶极光】【碧波暖阳】【幻夜萤光】【樱雪碧空】

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px;
  justify-content: center;
}

.color-card {
  width: 220px;
  height: 320px;
  border-radius: 20px;
  padding: 25px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  background: linear-gradient(to bottom, var(--color1), var(--color2));
}

.btn {
  width: 150px;
  height: 40px;
  border: none;
  border-radius: 40px;
  color: #fff;
  font-size: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(to right, var(--color1), var(--color2));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.color-info {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 10px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
}

.color-name {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(3px);
}
</style>
</head>
<body>
<div class="container">
  <!-- 原始颜色组 -->
  <div class="color-card" style="--color1: #FF768D; --color2: #AEFFF8">
    <div class="color-name">珊瑚薄荷</div>
    <button class="btn"></button>
    <div class="color-info">#FF768D → #AEFFF8</div>
  </div>

  <div class="color-card" style="--color1: #8274FF; --color2: #FFEF72">
    <div class="color-name">紫晶日光</div>
    <button class="btn"></button>
    <div class="color-info">#8274FF → #FFEF72</div>
  </div>

  <div class="color-card" style="--color1: #D874FF; --color2: #FFCE72">
    <div class="color-name">晶霞蜜橙</div>
    <button class="btn"></button>
    <div class="color-info">#D874FF → #FFCE72</div>
  </div>

  <!-- 扩展颜色组 -->
  <div class="color-card" style="--color1: #6AFFB8; --color2: #FF8CEC">
    <div class="color-name">碧玉霓虹</div>
    <button class="btn"></button>
    <div class="color-info">#6AFFB8 → #FF8CEC</div>
  </div>

  <div class="color-card" style="--color1: #FFB272; --color2: #72D4FF">
    <div class="color-name">暖阳晴空</div>
    <button class="btn"></button>
    <div class="color-info">#FFB272 → #72D4FF</div>
  </div>

  <div class="color-card" style="--color1: #FF7272; --color2: #C872FF">
    <div class="color-name">绯红罗兰</div>
    <button class="btn"></button>
    <div class="color-info">#FF7272 → #C872FF</div>
  </div>

	<div class="color-card" style="--color1: #74A5FF; --color2: #CEFF7E">
    <div class="color-name">天青柠光</div>
    <button class="btn"></button>
    <div class="color-info">#74A5FF → #CEFF7E</div>
  </div>

  <div class="color-card" style="--color1: #226EE0; --color2: #75FF9E">
    <div class="color-name">海蓝薄荷</div>
    <button class="btn"></button>
    <div class="color-info">#226EE0 → #75FF9E</div>
  </div>

	<div class="color-card" style="--color1: #B56BFF; --color2: #FFEA6B">
    <div class="color-name">紫晶极光</div>
    <button class="btn"></button>
    <div class="color-info">#B56BFF → #FFEA6B</div>
  </div>

  <div class="color-card" style="--color1: #4CD8FF; --color2: #FFA74C">
    <div class="color-name">碧波暖阳</div>
    <button class="btn"></button>
    <div class="color-info">#4CD8FF → #FFA74C</div>
  </div>

	<div class="color-card" style="--color1: #FF6BCB; --color2: #6BFFE2">
    <div class="color-name">幻夜萤光</div>
    <button class="btn"></button>
    <div class="color-info">#FF6BCB → #6BFFE2</div>
  </div>

  <div class="color-card" style="--color1: #8BAAFF; --color2: #FFB4E6">
    <div class="color-name">樱雪碧空</div>
    <button class="btn"></button>
    <div class="color-info">#8BAAFF → #FFB4E6</div>
  </div>
</div>
</body>
</html>