当前位置：首页 > 网页特效 > 按钮特效

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

分类：按钮特效日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<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中内置了背景图片和背景渐变色，以及阴影效果和圆角等。

```html
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效果。它采用绝对定位，同样使用了背景图片和渐变色，圆角，阴影等效果。

```html
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;
}       
```         
接下来的代码用于处理按钮在鼠标滑过和按下时的样式，具体代码请参考下载文件。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果