分享
也是一种美德

炫酷的网页下载按钮代码

下载按钮

<pre lang="html" line="1" escaped="true" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document</title>
<style type="text/css">
	#wrap {
	margin: 20px auto;
	text-align: center;
	}

	#wrap br {
		display: none;
	}

	.btn-slide, .btn-slide2 {
		position: relative;
		display: inline-block;
		height: 50px;
		width: 200px;
		line-height: 50px;
		padding: 0;
		border-radius: 50px;
		background: #fdfdfd;
		border: 2px solid #0099cc;
		margin: 10px;
		transition: .5s;
	}

	.btn-slide2 {
		border: 2px solid #efa666;
	}

	.btn-slide:hover {
		background-color: #0099cc;
	}

	.btn-slide2:hover {
		background-color: #efa666;
	}

	.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
		right: 100%;
		margin-right: -45px;
		background-color: #fdfdfd;
		color: #0099cc;
	}

	.btn-slide2:hover span.circle2 {
		color: #efa666;
	}

	.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
		right: 40px;
		opacity: 0;
	}

	.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
		opacity: 1;
		right: 40px;
	}

	.btn-slide span.circle, .btn-slide2 span.circle2 {
		display: block;
		background-color: #0099cc;
		color: #fff;
		position: absolute;
		float: right;
		margin: 5px;
		line-height: 42px;
		height: 40px;
		width: 40px;
		top: 0;
		right: 0;
		transition: .5s;
		border-radius: 50%;
	}

	.btn-slide2 span.circle2 {
		background-color: #efa666;
	}

	.btn-slide span.title,
	  .btn-slide span.title-hover, .btn-slide2 span.title2,
	  .btn-slide2 span.title-hover2 {
		position: absolute;
		right: 90px;
		text-align: center;
		margin: 0 auto;
		font-size: 16px;
		font-weight: bold;
		color: #30abd5;
		transition: .5s;
	}

	.btn-slide2 span.title2,
	  .btn-slide2 span.title-hover2 {
		color: #efa666;
		right: 80px;
	  }

	.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
		right: 80px;
		opacity: 0;
	}

	.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
		color: #fff;
	}
</style>
</head>
<body>
	
</body>
</html>

</head>
<body>
	<div id="wrap">
		<a href="http://www.cm361.cn" class="btn-slide" target="_blank"><span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">点击下载①</span><span class="title-hover">百度网盘下载</span></a> 
		<a href="http://www.cm361.cn" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span><span class="title2">点击下载②</span><span class="title-hover2">诚通网盘下载</span></a> 
	</div>
</body>
</html>
</pre>
赞(0) 打赏
未经允许不得转载:宇峰博客 » 炫酷的网页下载按钮代码
分享到: 更多 (0)

评论 抢沙发

宇峰博客 分享也是一种美德

我的微博我的博客

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏