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

一组纯CSS3带动画特效的精美3D大按钮

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

简介

##### HTML结构
所有的按钮都使用类似的HTML结构：使用a元素来包裹一组span元素。这些span元素用于制作按钮上图标的边框。例如第二种效果的HTML结构如下：

```html
<a href="#" class="btn left">
 
 Favorite This!
</a> 
``` 
##### CSS样式
按钮的样式通过<a>元素来渲染，它设置了固定的高度和圆角。宽度由内容来决定。

```html
a {
    text-decoration: none;
    color: #fff;
    margin: 0 10px;
}
.btn {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 53px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0px 1px 1px #888;
}      
```
3D按钮效果通过box-shadow来设置：

```html
.btn span.icon {
    font-size: 23px;
    background-color: #00967f;
    -webkit-box-shadow: 0 3px 0 0 #007261;
    box-shadow: 0 3px 0 0 #007261;
    text-shadow: 0px 1px 1px #888;
}
.btn span.title {
    -webkit-box-shadow: 0 3px 0 0 #00ae94;
    box-shadow: 0 3px 0 0 #00ae94;
    background-color: #00cdae;
}   
```            
另外通过移动span.arrow-left或span.arrow-right来制作鼠标滑过时的动画效果。

```html
.btn.left span.arrow-left {
    right: 0;
    -webkit-box-shadow: 10px 0 0 0 #00cdae, 10px 3px 0 0 #00ae94;
    box-shadow: 10px 0 0 0 #00cdae, 10px 3px 0 0 #00ae94;
    border-right: 10px solid #00cdae;
}
.btn.right span.arrow-left {
    right: 0;
    -webkit-box-shadow: 10px 0 0 0 #00967f, 10px 3px 0 0 #007261;
    box-shadow: 10px 0 0 0 #00967f, 10px 3px 0 0 #007261;
    border-right: 10px solid #00967f;
}
.btn.left span.arrow-right {
    left: 0;
    -webkit-box-shadow: -10px 0 0 0 #00967f, -10px 3px 0 0 #007261;
    box-shadow: -10px 0 0 0 #00967f, -10px 3px 0 0 #007261;
    border-left: 10px solid #00967f;
}
.btn.right span.arrow-right {
    left: 0;
    -webkit-box-shadow: -10px 0 0 0 #00cdae, -10px 3px 0 0 #00ae94;
    box-shadow: -10px 0 0 0 #00cdae, -10px 3px 0 0 #00ae94;
    border-left: 10px solid #00cdae;
}
.btn:hover span.arrow-left {
    right: 10px;
}
.btn:hover span.arrow-right {
    left: 10px;
}     
```

web299.com

一组纯CSS3带动画特效的精美3D大按钮

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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