黑色质感蓝色荧光3D按钮和单选按钮

PetitQ 按钮图标 2019-1-22 1.70K 0 0

这是一组非常漂亮的纯 CSS3 黑色质感的蓝色荧光 3D 按钮和单选按钮特效。这组按钮中有三个按钮，一组单选按钮和一个很酷的超级按钮。它们都是黑色的样式，并带有蓝色的荧光，使它们看起来具有一些科幻色彩。

HTML 结构

这些按钮的 HTML 结构非常简单，按钮使用<a>元素来制作，单选按钮使用<input>和<label>的组合来制作。

也想出现在这里？联系我们吧

```
<div id='wrapper'>
```
```
  <fieldset>
```
```
    <h2>Buttons!</h2>
```
```
    <a class='glowBtn'>Button</a>
```
```
    <a class='glowBtn hover'>Hover</a>
```

    <a class='glowBtn active'>Active</a>

```
  </fieldset>
```
```
  <fieldset>
```
```
    <h2>Radio Buttons!</h2>
```
```
    
```

    <input type='radio' id='radio1-1' checked='checked' name='radio'>

```
    <label for='radio1-1'>8</label>
```
```
    
```

    <input type='radio' id='radio1-2' name='radio'>

```
    <label for='radio1-2'>7</label>
```
```
    
```

    <input type='radio' id='radio1-3' name='radio'>

```
    <label for='radio1-3'>6</label>
```
```
  </fieldset>
```
```
  <fieldset>
```
```
    <h2>The Super Button!</h2>
```

    <a class='superBtn'>Super Button</a>

```
  </fieldset>
```
```
</div>
```

CSS 样式

该按钮特效中为这些按钮设置了一些通用样式。单选按钮实际上显示的是<label>元素。它们设置了固定的宽度和高度，并在 CSS 中内置了背景图片和背景渐变色，以及阴影效果和圆角等。

a.glowBtn, input[type='radio'] + label {

```
  z-index: 10;
```
```
  margin: 0 10px 10px 0;
```
```
  width: 115.5px;
```
```
  height: 37.29px;
```
```
  line-height: 36.3px;
```
```
  position: relative;
```
```
  font-size: 13.2px;
```
```
  letter-spacing: .1em;
```
```
  color: #0e0e0e;
```

  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);

```
  font-weight: bold;
```
```
  background-image: url('...');
```
```
  background-size: 100%;
```

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(100%, #000000));

  background-image: -moz-linear-gradient(#111111, #000000);

  background-image: -webkit-linear-gradient(#111111, #000000);

  background-image: linear-gradient(#111111, #000000);

```
  -moz-border-radius: 3px;
```
```
  -webkit-border-radius: 3px;
```
```
  border-radius: 3px;
```

  -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);

  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);

  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);

```
}
```

<a>元素和<label>元素的:after 伪元素用于制作按钮的 3D 效果。它采用绝对定位，同样使用了背景图片和渐变色，圆角，阴影等效果。

a.glowBtn:after, input[type='radio'] + label:after {

```
  z-index: -1;
```
```
  content: '';
```
```
  cursor: pointer;
```
```
  top: 1.98px;
```
```
  margin-left: 50%;
```
```
  left: -55px;
```
```
  width: 110px;
```
```
  height: 33px;
```
```
  display: block;
```
```
  position: absolute;
```
```
  background-image: url('...');
```
```
  background-size: 100%;
```

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #444444), color-stop(100%, #373738));

  background-image: -moz-linear-gradient(#444444, #373738);

  background-image: -webkit-linear-gradient(#444444, #373738);

  background-image: linear-gradient(#444444, #373738);

  -moz-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);

  -webkit-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);

```
  -moz-border-radius: 2px;
```
```
  -webkit-border-radius: 2px;
```
```
  border-radius: 2px;
```
```
}
```