📝 代码查看
使用runcode.html页面

2
查看次数
2025-11-25
创建时间
2025-11-25
最后更新
<div class="panel">
  <button type="button" class="button">Hello world!</button>
</div>

<div class="panel green-panel">
  <button type="button" class="button">Hello world!</button>
</div>

<div class="panel orange-panel">
  <button type="button" class="button">Hello world!</button>
</div>
/*@import "compass/css3";

@import 'compass';

@mixin alpha-attribute($attribute, $color, $background: white) {
  $percent: alpha($color) * 100%;
  $opaque: opacify($color, 1);
  $solid-color: mix($opaque, $background, $percent);
  @if ($percent < 100%) { #{$attribute}: $solid-color; }
  #{$attribute}: $color;
}

@mixin color-button($text, $color, $background: white) {
  @include alpha-attribute('background', $color, $background);
  border: 1px solid;
  @include alpha-attribute('border-color', rgba(black, 0.7), $background);
  @include alpha-attribute('color', $text, $background);
  @include box-shadow(rgba(white, 0.2) 0 1px 0 inset);
  
  &:focus, &:hover {
    @include alpha-attribute('background', transparentize($color, 0.2), $background);
    @include alpha-attribute('color', opacify($text, 1), $background);
  }
  
  &:focus {
    outline: none;
  }
  
  &:active {
    @include alpha-attribute('background', opacify($color, 0.1), $background);
    @include box-shadow(none);
  }
}

.button {
  @include appearance(none);
  font-family: sans-serif;
  font-size: 14px;
  padding: 0.4em 1em 0.5em;
  -webkit-font-smoothing: antialiased;
  @include color-button(rgba(white, 0.8), rgba(black, 0.5));
  cursor: pointer;
}

.panel {
  @include box-sizing(border-box);
  width: 220px;
  padding: 50px;
  text-align: center;
  margin: 15px;
  background: gray;
  float: left;
  .button { @include color-button(rgba(white, 0.8), rgba(black, 0.5), gray); }
}

.green-panel {
  background: #393;
  .button { @include color-button(rgba(white, 0.8), rgba(black, 0.5), #393); }
}

.orange-panel {
  background: #f73;
  .button { @include color-button(rgba(white, 0.8), rgba(black, 0.5), #f73); }
}*/
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  font-family: sans-serif;
  font-size: 14px;
  padding: 0.4em 1em 0.5em;
  -webkit-font-smoothing: antialiased;
  background: gray;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid;
  border-color: #4d4d4d;
  border-color: rgba(0, 0, 0, 0.7);
  color: white;
  color: rgba(255, 255, 255, 0.8);
  -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  cursor: pointer;
}
.button:focus, .button:hover {
  background: #b3b3b3;
  background: rgba(0, 0, 0, 0.3);
  color: white;
}
.button:focus {
  outline: none;
}
.button:active {
  background: #666666;
  background: rgba(0, 0, 0, 0.6);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.panel {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 220px;
  padding: 50px;
  text-align: center;
  margin: 15px;
  background: gray;
  float: left;
}
.panel .button {
  background: #404040;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid;
  border-color: #262626;
  border-color: rgba(0, 0, 0, 0.7);
  color: #e6e6e6;
  color: rgba(255, 255, 255, 0.8);
  -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
}
.panel .button:focus, .panel .button:hover {
  background: #5a5a5a;
  background: rgba(0, 0, 0, 0.3);
  color: white;
}
.panel .button:focus {
  outline: none;
}
.panel .button:active {
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.green-panel {
  background: #393;
}
.green-panel .button {
  background: #1a4d1a;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid;
  border-color: #0f2e0f;
  border-color: rgba(0, 0, 0, 0.7);
  color: #d6ebd6;
  color: rgba(255, 255, 255, 0.8);
  -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
}
.green-panel .button:focus, .green-panel .button:hover {
  background: #246b24;
  background: rgba(0, 0, 0, 0.3);
  color: white;
}
.green-panel .button:focus {
  outline: none;
}
.green-panel .button:active {
  background: #143d14;
  background: rgba(0, 0, 0, 0.6);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.orange-panel {
  background: #f73;
}
.orange-panel .button {
  background: #803c1a;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid;
  border-color: #4d240f;
  border-color: rgba(0, 0, 0, 0.7);
  color: #ffe4d6;
  color: rgba(255, 255, 255, 0.8);
  -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
}
.orange-panel .button:focus, .orange-panel .button:hover {
  background: #b35324;
  background: rgba(0, 0, 0, 0.3);
  color: white;
}
.orange-panel .button:focus {
  outline: none;
}
.orange-panel .button:active {
  background: #663014;
  background: rgba(0, 0, 0, 0.6);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
暂无JavaScript代码

👁️ 实时预览