css按钮切换效果代码,Css代码库,德仔网

代码语言

代码分类

【Css】 css按钮切换效果

作者: / 发布于2016/9/20/ 477

<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <style>
.content {
	padding: 2em 1em 5em;
	z-index: 1;
	max-width: 600px;
	margin: 0 auto;
}
.content p {
	margin: 1em 0;
	padding: 0 0 2em;
	font-size: 0.85em;
}
.box {
	padding: 4.5em 0;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}
.bg-3 {
	background-color:#ccc;
	color: #fff;
}
.button {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin:3em;
	padding: 1em 3em;
	border: 2px solid #ccc;
	background:#000;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
	font-family:"Helvetica Neue",Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
}
.bg-3 .button {
	color: #fff;
	border-color: #fff;
	border-radius: 20px;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	
}


.button--tamaya {
	overflow: hidden;
	color: #7986cb;
	min-width: 180px;
}
.button--tamaya.button--inverted {
	color: #37474f;
	border-color: #37474f;
}
.button--tamaya::before,
.button--tamaya::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
        height: 52%;;
	left: 0;
	background: #f66705;
	color: #fff;
	overflow: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.bttwo::before,
.bttwo::after{
	background: #1a72d1;
}
.btthree::before,
.btthree::after{
	background: #349e00;
}
.btfour::before,
.btfour::after{
	background: #db1205;
}
.button--tamaya.button--inverted::before,
.button--tamaya.button--inverted::after {
	background: #fff;
	color: #37474f;
}
.button--tamaya::before {
	top: 0;
	padding-top: 1em;
}
.button--tamaya::after {
	bottom: 0;
	line-height: 0;
}
.button--tamaya > span {
	display: block;
	-webkit-transform: scale3d(0.2, 0.2, 1);
	transform: scale3d(0.2, 0.2, 1);
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--tamaya:hover::before {
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}
.button--tamaya:hover::after {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.button--tamaya:hover > span {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
    </style>
</head>
<body>


<section class="content">
				<div class="box bg-3">

					<button  class="button button--tamaya button--round-s button--text-thick button--border-thin" data-text="界面1"><span>界面1</span></button>
					<button  class="button button--tamaya button--round-s button--text-thick button--border-thin bttwo" data-text="界面2"><span>界面2</span></button>
					<button  class="button button--tamaya button--round-s button--text-thick button--border-thin btthree" data-text="界面3"><span>界面3</span></button>
					<button  class="button button--tamaya button--round-s button--text-thick button--border-thin btfour" data-text="界面4"><span>界面4</span></button>
				</div>

			</section>
	</div>
</body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　按钮切换　

同语言下

可能有用的

贡献的其它代码Label