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

30种炫酷CSS3鼠标滑过按钮动画特效

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

30种炫酷CSS3鼠标滑过按钮动画特效

简介

按钮的HTML结构使用嵌套div结构来制作。这里以第6种效果为例。

```html
<div class="wrapper-inner-tab-backgrounds-first">
  <div class="sim-button button6">
    <span>Login</span>
  </div>
</div> 
```
#####  CSS样式
属性创建按钮的通用样式。按钮的定位方式应该设置为相对定位，这样便于它里面元素的定位。

```html
.button6{
  color: rgba(255,255,255,1);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.5);
  position: relative; 
}
.button6 a{
  color: rgba(51,51,51,1);
  text-decoration: none;
  display: block;
}           
```     
按钮中的文本采用绝对定位。

```html
.button6 span{
  z-index: 2; 
  display: block;
  position: absolute;
  width: 100%;
  height: 100%; 
}       
```         
鼠标滑过时动画的元素是一个::before伪元素，它被设置为绝对定位。这个效果开始时伪元素的大小为这个按钮的一半大小，透明度为0。在鼠标滑过的时候，它会被放大到按钮大小，透明度过渡为1。

```html
.button6::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  background-color: rgba(255,255,255,0.5);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: scale(0.5, 1);
  transform: scale(0.5, 1);
}
.button6:hover::before{
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}         
```       
其它各种鼠标滑过按钮动画效果的CSS代码请参考下载文件的main.css文件。

web299.com

30种炫酷CSS3鼠标滑过按钮动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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