一款基于css3的动画按钮
之前为大家分享了 推荐10款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下:
实现的代码。
html代码:
<div class="share-buttons">
<div class="share-button">
<div class="share-button-secondary">
<div class="share-button-secondary-content">
share on twitter
</div>
</div>
<div class="share-button-primary">
<i class="share-button-icon fa fa-twitter"></i>
</div>
</div>
<div class="share-button">
<div class="share-button-secondary">
<div class="share-button-secondary-content">
share on facebook
</div>
</div>
<div class="share-button-primary">
<i class="share-button-icon fa fa-facebook"></i>
</div>
</div>
<div class="share-button">
<div class="share-button-secondary">
<div class="share-button-secondary-content">
pin on pinterest
</div>
</div>
<div class="share-button-primary">
<i class="share-button-icon fa fa-pinterest"></i>
</div>
</div>
<div class="share-button">
<div class="share-button-secondary">
<div class="share-button-secondary-content">
share on tumblr
</div>
</div>
<div class="share-button-primary">
<i class="share-button-icon fa fa-tumblr"></i>
</div>
</div>
<div class="share-button">
<div class="share-button-secondary">
<div class="share-button-secondary-content">
share on google+
</div>
</div>
<div class="share-button-primary">
<i class="share-button-icon fa fa-google-plus"></i>
</div>
</div>
</div>
css3代码:
body
{
background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
background: linear-gradient(90deg, #FF8008 10%, #FFC837 90%);
padding: 2em;
text-align: center;
} *
{
-moz-box-sizing: border-box;
box-sizing: border-box;
} .share-buttons
{
position: absolute;
width: 300px;
height: 212px;
padding-left: 135px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -106px;
}
.share-buttons .share-button
{
float: left;
margin-top: 15px;
}
.share-buttons .share-button:first-child
{
margin-top:;
}
.share-buttons .share-button:after
{
clear: both;
display: table;
} .share-button
{
display: block;
position: relative;
height: 30px;
}
.share-button:hover
{
cursor: pointer;
}
.share-button:hover .share-button-primary
{
box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
}
.share-button:hover .share-button-secondary-content
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} .share-button-primary
{
position: absolute;
background: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
left:;
top: 50%;
margin-top: -15px;
} .share-button-icon
{
display: block;
color: #242424;
position: absolute;
width: 30px;
line-height: 30px;
font-size: 16px;
margin-top: 1px;
} .share-button-secondary
{
overflow: hidden;
margin-left: 15px;
height: 30px;
} .share-button-secondary-content
{
font-family: sans-serif;
font-size: .75em;
background: #fff;
display: block;
height: 30px;
text-align: left;
padding-left: 24px;
padding-right: 18px;
line-height: 30px;
color: #242424;
border-radius: 0 15px 15px 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 175ms ease;
transition: transform 175ms ease;
}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/11064
一款基于css3的动画按钮的更多相关文章
- 一款基于CSS3漂亮的按钮
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 一款基于css3和jquery实现的动画弹出层
今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...
- 一款基于css3的简单的鼠标悬停按钮
今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
- 一款基于jquery漂亮的按钮
之前为大家分享了好多css3实现的按钮.今天给大家分享一款基于jquery漂亮的按钮.这款按钮背景下用了一张图片.当鼠标经过的时候背景用半透明div遮住.一起看下效果图: 在线预览 源码下载 实现 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- 一款基于css3非常实用的鼠标悬停特效
今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览 源码下载 实现 ...
- 7款基于jquery的动画搜索框
无论是电商网站,还是媒体网,还是个人博客,每个网站都有属于自己个性化的搜索框.今天小编给大家带来7款基于jquery的动画搜索框.每个搜索框都采用了动画效果,一起看下效果图吧. 在线预览 源码下载 ...
- 一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
随机推荐
- MySQL存储过程中的3种循环【转载】
在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...
- linux 挂载硬件设备
mount命令用于挂载文件系统,格式为:“mount 文件系统 挂载目录”. 挂载是在使用硬件设备前的最后操作的一步,只需要用mount命令把硬件设备与一个目录做关联,然后就能在这个目录中看到硬件设备 ...
- FFmpeg基础库编程开发学习笔记——视频常见格式
声明一下:这些关于ffmpeg的文章仅仅是用于记录我的学习历程和以便于以后查阅,文章中的一些文字可能是直接摘自于其它文章.书籍或者文献,学习ffmpeg相关知识是为了使用在Android上,我也才是刚 ...
- maven 亲测可用国内镜像 阿里云(20170123)
来源于:http://www.jianshu.com/p/4d5bb95b56c5 http://blog.csdn.net/qq_27093465/article/details/52982484 ...
- c语言格式大整理
1.C语言中,非零值为真,真用1表示:零值为假,假用0表示. 2.转义字符参考: \a 蜂鸣,响铃 \b 回退:向后退一格 \f 换页 \n 换行 \r 回车,光标到本行行首 \t 水平制表 \v 垂 ...
- Java数据库表自动转化为PO对象
本程序简单实现了数据库内省,生成PO对象. 数据库内省有如下两种实现方式: 通过mysql元表 通过desc table,show tables等命令 import java.io.IOExcepti ...
- 【LeetCode】46. Permutations (2 solutions)
Permutations Given a collection of numbers, return all possible permutations. For example,[1,2,3] ha ...
- Oracle Explain Plan,hint解释与示例
Oracle 专业dba博客:http://blog.csdn.net/tianlesoftware Hint 是Oracle 提供的一种SQL语法,它允许用户在SQL语句中插入相关的语法,从而影响S ...
- 苹果越狱后必备软件,总有你需要的!11月23日追加14个,支持【iOS4】
http://bbs.dospy.com/thread-7398730-1-301-2.html越狱后必备软件,总有你需要的!11月23日追加14个,支持[iOS4] 背景自定义插件
- 解决修改计算机名后tfs连接不上的错误
1,用vs 自带的工具命令 tf workspaces 查看集合 2,执行命令: >tf workspaces /collection:https://aaaa.visualstudio.com ...