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

这是一组非常漂亮的纯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>
    <!-- Radio one -->
    <input type='radio' id='radio1-1' checked='checked' name='radio'>
    <label for='radio1-1'>8</label>
    <!-- Radio two -->
    <input type='radio' id='radio1-2' name='radio'>
    <label for='radio1-2'>7</label>
    <!-- Radio three -->
    <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;
}                
              

接下来的代码用于处理按钮在鼠标滑过和按下时的样式，具体代码请参考下载文件。