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

纯CSS3 3D按钮效果

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

纯CSS3 3D按钮效果

简介

在页面中引入pushy-buttons.css文件。

```html
<link href="css/pushy-buttons.css" rel="stylesheet">
```
#####  HTML结构
使用超链接a元素作为3D按钮的HTML结构：

```html

<a class="btn btn--lg btn--blue" href="#">Button</a>
<a class="btn btn--df btn--blue" href="#">Button</a>
<a class="btn btn--md btn--blue" href="#">Button</a>
<a class="btn btn--sm btn--blue" href="#">Button</a>
```
#####  CSS样式
按钮通过class类来定义尺寸和颜色，其中尺寸分为4种：

- btn--lg
- btn--df
- btn--md
- btn--sm
在sass文件中定义如下：

```html
// 按钮尺寸
$large: 1.50em;
$default: 1.25em;
$medium: 1em;
$small: 0.75em;    
```      
颜色分为3种：

- btn--blue
- btn--green
- btn--red
在sass文件中定义如下：

```html
// 颜色
$blue: #3498db;
$green: #1abc9c;
$red: #e65d4f;   
```           
所有按钮的结构如下：

```html

<div>
  <a class="btn btn--lg btn--blue" href="#">Button</a>
  <a class="btn btn--df btn--blue" href="#">Button</a>
  <a class="btn btn--md btn--blue" href="#">Button</a>
  <a class="btn btn--sm btn--blue" href="#">Button</a>
</div>
 

<div>
  <a class="btn btn--lg btn--green" href="#">Button</a>
  <a class="btn btn--df btn--green" href="#">Button</a>
  <a class="btn btn--md btn--green" href="#">Button</a>
  <a class="btn btn--sm btn--green" href="#">Button</a>
</div>
 

<div>
  <a class="btn btn--lg btn--red" href="#">Button</a>
  <a class="btn btn--df btn--red" href="#">Button</a>
  <a class="btn btn--md btn--red" href="#">Button</a>
  <a class="btn btn--sm btn--red" href="#">Button</a>
</div>        
```

web299.com

纯CSS3 3D按钮效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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