CSS hover 样式很简单,但是想创造出有意思、实用、有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击、悬停的相关特效,以便大家获得更好的创造灵感。

今天我们整理了10组网页按钮的点击与悬停效果,每组都有不同的特色以及创意性,下面达人将特效录制成 GIF 动图,方便大家在线观看,若想看真实源代码的,可以点击「查看演示」的链接进行查看。

空间感很强的按钮特效

当你的鼠标在按钮上左右晃动时,按钮会自动带有一些3D旋转的空间感,看起来很有科技感啊,该按钮使用 CSS 和 JS 实现。

查看演示: https://codepen.io/electerious/pen/rroqdL

点击涟漪效果

这是 Material Design 的按钮点击风格,点击时带有一个波纹涟漪效果,而且还有一个特色就是,按钮使用了渐变颜色,让按钮更加形象突出。

查看演示: https://codepen.io/tomma5o/pen/zwyKya

泡沫按钮效果

当鼠标经过按钮时,按钮会出现像「分离」的效果,很好看,需要 SVG 与 JS 结合才能实现。

查看演示:https://codepen.io/Grsmto/pen/RPQPPB

遮罩效果按钮

查看演示:https://codepen.io/pizza3/pen/qmerBv

线按钮样式动画

动画线条是使用 background-image: repeating-linear-gradient()实现的,再通过动画@keyframes和 background-position属性来让线条动起来。

查看演示:https://codepen.io/Zeindelf/pen/vZbyEg

Weeeeee

这个动画录制时出现些问题,建议大家直接看在线演示。

查看演示:https://codepen.io/equinusocio/pen/yYJeXz

Shiney 按钮

这种按钮相当不少用户看过,实现方法是半透明的高光样式,然后通过@keyframes和transform 旋转45度来实现。

查看演示:https://codepen.io/bigglesrocks/pen/RPzNjw

斑点按钮

查看演示:https://codepen.io/suez/pen/aOgMxy

会倾斜的按钮

当鼠标向左点击的时候,按钮会向左边微斜,点击右边会就向边倾斜……

查看演示:https://codepen.io/pouretrebelle/pen/zwRyqK

电波按钮

鼠标悬停到按钮上时,按钮像很不稳定一样,随时消失……

查看演示:https://codepen.io/ktaftaf/pen/pbLOWg

10个CSS+HOVER 的创意按钮的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. 纯CSS打造好看的按钮样式

    好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...

  3. css 鼠标移动到按钮图片改变;图片换层;鼠标放上透明度改变直到隐藏;

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  4. 【笔记】css hover 伪类控制其他元素

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

  5. CSS active选择器与CSS hover选择器

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. CSS hover

    CSS hover hover 鼠标移动到当前标签上时,以下css属性才能生效 <!DOCTYPE html> <html lang="en"> <h ...

  7. 10个CSS简写/优化技巧-摘自网友

    10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...

  8. 10个CSS简写技巧让你永远受用

    转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的 ...

  9. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

随机推荐

  1. Inno Setup 编译器操作

    Inno Setup 编译器 1◆ 下载inno ha_innosetup5502_skygz_DownG.com 2◆ 安装 next 3◆ 操作 success 4◆ 测试安装 5◆ 卸载 uni ...

  2. poj1088 滑雪 解题报告

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 77423   Accepted: 28779 Description ...

  3. 对spring 对持久层的支持和数据库连接池的理解

    1.spring对持久层的支持在于,得到数据库连接之后操作上的封装,将操作简化了.也就是说以后操作sql语句就用XXXTemplate(就是一个工具类)对象了. 2.数据库连接池的作用只在于得到数据库 ...

  4. (转)Secondary NameNode的作用

    在Hadoop中,有一些命名不好的模块,Secondary NameNode是其中之一.从它的名字上看,它给人的感觉就像是NameNode的备份.但它实际上却不是.很多Hadoop的初学者都很疑惑,S ...

  5. python 的StringIO

    python 3.4以后StringIO和cStringIO就没有了,转移到 io,的StringIO和BytesIO from io import StringIO fp=StringIO( ) 1 ...

  6. mysql 到postgresql

    1 import pandas as pd 2 import psycopg2 3 from io import StringIO 4 import pymysql 5 conf={"mys ...

  7. DevExpress v17.2新版亮点—WinForms篇(三)

    用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.开篇介绍了DevExpress WinForms v17.2 Data Grid Control ...

  8. php变量和字符串连接符——点

    连接符——点,本身也是一种运算符.它真正的名字应该叫“字符运算符”.作用是把两个字符串连接起来. echo 字符 . 变量 . 字符;  //点号把三个值连接成为一个,运行正常. 例: 1.字符串+变 ...

  9. cocos2d-x移植:xcode到eclipse

    xcode程序移植到eclipse 必要组件: 1.macos gcc编译器,若没有,在xcode->preference->downloads中下载command line tools( ...

  10. tomcat部署和启动2

    catalina run 启动服务器后,按下CTRL+C,停止服务器,选择"y",退回到正常命令行. catalina stop