css 如何用条纹给纽扣上色？[关闭]

vwhgwdsa 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(80)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
4天前关闭。
Improve this question
有没有可能给按钮上色像图片中那样？

css

来源：https://stackoverflow.com/questions/76515323/how-to-color-a-button-with-stripes

1条答案

按热度按时间

qyswt5oh1#

你需要创建几个div，然后用CSS将它们连接起来。
由于您将为每个条带使用边框，因此在这里将box-sizing设置为border-box非常重要。这样一切都正确地对齐。

document.querySelector('.rainbow-button')
  .addEventListener('click', () => console.log('Clicked!'));

.as-console-wrapper { max-height: 5rem !important; }

body {
  background: #505661;
}

.rainbow-button {
  position: relative;
  min-width: 4em;
  min-height: 4em;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 2rem; /* Make it 2x the size */
}

.rainbow-button:hover {
  cursor: pointer;
}

.rainbow-button,
.rainbow-button .stripes,
.rainbow-button .stripe,
.rainbow-button .value {
  box-sizing: border-box; /* The most important rule */
}

.rainbow-button .stripes,
.rainbow-button .value {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rainbow-button .stripe {
  height: 25%;
  width: 100%;
  border: 0.15em solid grey;
}

.rainbow-button .stripe:first-child {
  border-top-left-radius: 0.667em;
  border-top-right-radius: 0.667em;
}
.rainbow-button .stripe:last-child {
  border-bottom-left-radius: 0.667em;
  border-bottom-right-radius: 0.667em;
}
.rainbow-button .stripe:nth-child(1) { border-color: #33A9D9; }
.rainbow-button .stripe:nth-child(2) { border-color: #32C475; }
.rainbow-button .stripe:nth-child(3) { border-color: #DDD237; }
.rainbow-button .stripe:nth-child(4) { border-color: #CB4A4F; }

.rainbow-button:hover .stripe:nth-child(1) { border-color: #3abef2; }
.rainbow-button:hover .stripe:nth-child(2) { border-color: #3ef28f; }
.rainbow-button:hover .stripe:nth-child(3) { border-color: #f2e63c; }
.rainbow-button:hover .stripe:nth-child(4) { border-color: #f2595e; }

.rainbow-button .value {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #EEE;
  font-size: 2em;
  z-index: 100;
  text-shadow: 0.05em 0.05em 0.1em black; /* For contrast */
}

.rainbow-button:hover .value {
  color: #FFF;
}

<button type="button" class="rainbow-button">
  <div class="stripes">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
  <div class="value">4</div>
</button>

或者，您可以将条带设为flex:1，并从等式中删除width:25%：

.rainbow-button .stripes {
  display: flex;
  flex-direction: column;
}

.rainbow-button .stripe {
  flex: 1;
  border: 0.15em solid grey;
}

现在我们不必担心百分比：

document.querySelector('.rainbow-button')
  .addEventListener('click', () => console.log('Clicked!'));

.as-console-wrapper { max-height: 5rem !important; }

body {
  background: #505661;
}

.rainbow-button {
  position: relative;
  min-width: 4em;
  min-height: 4em;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 2rem; /* Make it 2x the size */
}

.rainbow-button:hover {
  cursor: pointer;
}

.rainbow-button,
.rainbow-button .stripes,
.rainbow-button .stripe,
.rainbow-button .value {
  box-sizing: border-box; /* The most important rule */
}

.rainbow-button .stripes,
.rainbow-button .value {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rainbow-button .stripes {
  display: flex;
  flex-direction: column;
}

.rainbow-button .stripe {
  flex: 1;
  border: 0.15em solid grey;
}

.rainbow-button .stripe:first-child {
  border-top-left-radius: 0.667em;
  border-top-right-radius: 0.667em;
}
.rainbow-button .stripe:last-child {
  border-bottom-left-radius: 0.667em;
  border-bottom-right-radius: 0.667em;
}
.rainbow-button .stripe:nth-child(1) { border-color: #33A9D9; }
.rainbow-button .stripe:nth-child(2) { border-color: #32C475; }
.rainbow-button .stripe:nth-child(3) { border-color: #DDD237; }
.rainbow-button .stripe:nth-child(4) { border-color: #CB4A4F; }

.rainbow-button:hover .stripe:nth-child(1) { border-color: #3abef2; }
.rainbow-button:hover .stripe:nth-child(2) { border-color: #3ef28f; }
.rainbow-button:hover .stripe:nth-child(3) { border-color: #f2e63c; }
.rainbow-button:hover .stripe:nth-child(4) { border-color: #f2595e; }

.rainbow-button .value {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #EEE;
  font-size: 2em;
  z-index: 100;
  text-shadow: 0.05em 0.05em 0.1em black; /* For contrast */
}

.rainbow-button:hover .value {
  color: #FFF;
}

<button type="button" class="rainbow-button">
  <div class="stripes">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
  <div class="value">4</div>
</button>

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何用条纹给纽扣上色？[关闭]

1条答案

相关问题

热门标签

最新问答