今天给大家分享5个基于css3超炫的鼠标滑动按钮动画。这5个按钮鼠标经过的时候有超炫的动画效果。这5个按钮适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下： 在线预览 源码下载 实现的代码。 html代码： 火箭 带你飞 下载 点击下载 Download Now ...
这是一组效果非常炫酷的HTML5 SVG和CSS3鼠标点击按钮特效。这组鼠标点击按钮特效共有22种效果，大多数是在伪元素上使用CSS3 animations来制作动画效果。非常适合于移动手机APP上的按钮触摸特效。 在线演示：http://www.htmleaf.com/Demo/201502121370.html 下载地址：http://www.htmleaf.com/html5/SVG/201502121369.html
这是一款集合20组不同 CSS3按钮样式和按钮鼠标滑过特效的插件。这20组 css3按钮每一组都有3种示例，每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合，相信总有一款适合你。 请注意这些按钮动画效果只在最新版本的现代浏览器上工作，(Mobile)Safari浏览器只支持其中很少的效果。 该按钮动画特效中大多数使用的是CSS transitions，但有一些动画效果也使用CSS animations来完成。 在线演示：http://ww...
先预览效果 其中用到了CSS3的Transition属性：设置动画时间、效果；Transform属性：设置元素旋转、位移；box-sizing属性：以特定的方式定义某个区域的特定元素； 制作小三角方法： 1 width:0; height:0; overflow:hidden; 2 border:7px solid transparent; 3 border-top-color:#2dcb70; /*宽高都为零,先设置边框为透明,再在需要的地方给边框单独设置颜色即可*/ HTML代码 1 2 3 4 ...
flipside是一款使用css3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效。该点击按钮特效在按钮不同方向的边部点击时，产生的过渡动画特效是不一样的。 在线演示：http://www.htmleaf.com/Demo/201503101497.html 下载地址：http://www.htmleaf.com/css3/css3donghua/201503101496.html
特点： 1、圆角边框 border-radius 2、文字有背景 text-shadow 3、按钮有阴影 box-shadow 4、文字有向上的阴影 text-shadow 5、按钮背景色有个从上往下的渐变效果 linear-gradient 6、点击后明显有个下按效果 .btn{ background-color: #ee432e; background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%,#b51700 50%, #891100 100%); backgroun...
1、超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单，比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画，效果都很漂亮。今天我们要再分享一款更酷的CSS3 3D立体菜单，这款菜单侧躺在页面上，每个菜单项都有不错的小图标。 在线演示 源码下载 2、纯CSS3立体动画菜单 菜单项按下有内阴影 这次小编来分享一款利用纯CSS3实现的立体动画菜单，该菜单的实现非常简...
1、纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。 在线演示 源码下载 2、纯CSS3实现动感弹性按钮 今天我们来分享一款很有意思的CSS3按钮，当你把鼠标滑过按钮时，整个按钮就会全身...
1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮，按钮非常简单，提供了分享到twitter、facebook、youtube等大型社交网站。每一个分享按钮都有个大社交网站的Logo图标，并且在鼠标滑过这些按钮时，利用CSS3的动画特性出现滑动的动画效果。 在线演示 源码下载 2、HTML5/CSS3悬浮按钮特效 Canvas彩球飞舞效果 这次要分享一个非常具有动画色彩的CSS3按钮，按钮的外观比较一般，但它有两个特别的地方：一、按钮...
一个按钮CSS3 返回按钮 .kele:before{ position: absolute; content: " "; border: transparent 14px solid; border-width: 13px 8px ; border-right-color: #CCC; top: 1px; left: -16px; height: 0; width: 0; } .kele{ position: relative; width: 40px; height: 28px; background: #EEE; border-radius: 5px; margin: 30px; text-align: center; line-height: 28px; color: #999; font-size: 14px; border: 1px solid ...
CSS3 3D渐变按钮代码 body { background: #e5e5e5; text-align: center; } .button { margin: 10px; text-decoration: none; font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/ display: inline-block; text-align: center; color: #fff; border: 1px solid #9c9c9c; border: 1px solid rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0,0,0,0.4); box-shadow: 0 0 .05em rgba(...
CSS3引入了众多供功能强大的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮，漂亮吧？把鼠标悬停在按钮上，还有动感的光泽移动效果。 温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。 在线演示 源码下载 这些精美的效果用到了CSS3RGBA、box-shadow（阴影）、border-radius（边框圆角）和 linear-gradient（线性渐变），为了便于阅...
CSS3实现的立体按钮article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}a{background-color:#DB5705;border-radius:8px 8px 8px 8px;box-shadow:0 9px 0 #DB1F05,0 9px 25px rgba(0,0,0,0.7);color:#FFFFFF;display:block;font-family:'微软雅黑';font-size:42px;font-weight:700;margin:100px auto;padding:4px;position:relative;text-align:center;text-decoration:none;transition:all 0.1s ease 0s;...
Button UI Kitbody{ background: #35393d;}.controls_ui{ width: 300px; margin: 40px auto;}.button{ color: #0f1214; text-shadow:0 1px 0 #484f58; margin-bottom: 20px; margin-right: 5px; border:1px solid #202124; box-shadow: 0 1px 0 #616a74 inset,0 1px 5px #212528; background: -webkit-linear-gradient(top,#474d54,#2f363d); background: -moz-linear-gradient(top,#474d54,#2f363d); background: -ms-linear-gr...
在工作中经常遇到在手机浏览器中浏览网页时，点击页面中的按钮或者是具备点击事件的元素，就会出现一个默认的高亮框，影响整体的感官体验。 可以用一个简单的css3属性来解决： tap-highlight-color，最好加上webkit浏览器前缀。 -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */ 如果你的一大div中包含了很多小的...