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

纯CSS3 Material Design扁平风格按钮设计

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

简介

#####  HTML结构
按钮使用标准的HTML button元素来制作，data-button实线用于设置按钮的颜色，可用的颜色有：red，green，blue和purple。你可以自己扩展其它颜色。

```html
<button class="button button_3d" data-button="red">BUTTON</button>
```
特效中为按钮预定义了几个class类：

- button_3d：用于制作3D按钮效果。
- button_em：用于制作粗边框效果。
- button_border：用于制作自带边框，不带背景的按钮效果。
- button_shadow：用于制作带阴影效果的按钮。
- button_arrow：带鼠标滑过时箭头动画的按钮。
#####  CSS样式
该扁平风格按钮通过SASS来编写，文件中定义了4中基本颜色：

- $red:#EF5350; 
- $green:#2ecc71; 
- $blue:#2980b9; 
- $purple:#BF4A67;                  
并且定义了按钮的通用样式：

```html
.button{margin:8px;font-family:'Open Sans',sans-serif;cursor:pointer;transition:all 0.3s}
.button:focus{outline:0}        
```         
以及5种不同风格按钮的样式：

```html
.button_3d {
  padding:1em 1.3em .9em;
  border: 0;box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.15);
  font-size: 1.2em;border-radius: 6px;
  color: #e6e6e6;
  background: #b4b4b4;
  transition:all 0.1s;
  &:hover {box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.15)}}
.button_em {
  padding:.9em 1.3em .8em;
  border:0;font-size:1.2em;
  border-radius:5px;color:#e6e6e6;
  background:#b4b4b4;
  box-shadow:inset 0 0 0 4.5px rgba(255, 255, 255, 0.65);
  &:hover {box-shadow: inset 0 0 0 4.5px rgba(255, 255, 255, 0.25)}}
.button_border {
  padding: .85em 1.3em .65em;
  font-size: 1.2em;
  background: none;
  border-width: 2.7px;
  border-style: solid;
  border-color: #a0a0a0;
  border-radius: 4px;
  color: #787878;}
.button_shadow {
  padding: .85em 1.3em .65em;
  font-size: 1.2em;
  background: #fafafa;
  border: 0;
  box-shadow: 0 0 20px silver;
  color: #787878;}
.button_normal {
  padding: .85em 1.3em .65em;
  font-size: 1.2em;
  background: silver;
  border: 0;
  color: white;
  &:hover {background:darken(silver,10)} 
  &[data-button=red]:hover {background:darken($red,10)} 
  &[data-button=blue]:hover {background:darken($blue,10)} 
  &[data-button=green]:hover {background:darken($green,10)} 
  &[data-button=purple]:hover {background:darken($purple,10)}
}
.button_3d, .button_em, .button_normal {
  &[data-button=red] {background: $red;}  
  &[data-button=green] {background: $green;}  
  &[data-button=blue] {background: $blue;}  
  &[data-button=purple] {background: $purple;}}
.button_shadow, .button_border {
  &:hover {color: #fff !important;background: #a0a0a0}
  &[data-button=red] {border-color: $red;color: $red}  
  &[data-button=blue] {border-color: $blue;color: $blue}  
  &[data-button=green] {border-color: $green;color: $green}  
  &[data-button=purple] {border-color: $purple;color: $purple}  
  &[data-button=red]:hover {background: $red}  
  &[data-button=blue]:hover {background: $blue}  
  &[data-button=green]:hover {background: $green}  
  &[data-button=purple]:hover {background: $purple}}
.button_arrow {
  &:hover:after {content:" 》";position:absolute;margin-left:4px;opacity:.6}  
  &:hover {padding-left:1em;padding-right:1.6em}}              
```

web299.com

纯CSS3 Material Design扁平风格按钮设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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