网页按钮效果css3,css3按钮效果
/* Box colors */
.bg-1 {
background:#ECEFF1;
color:#37474f;
}
/* Common button styles */
.button {
float:left;
min-width:150px;
max-width:250px;
display:block;
margin:1em;
padding:1em 2em;
border:none;
background:none;
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;
}
/* Text color adjustments (we could stick to the “inherit” but that does not work well in Safari) */
.bg-1 .button {
color:#37474f;
border-color:#37474f;
}
.button—round-s {
border-radius:5px;
}
.button—quidel {
background:#aebbff;
color:#7986cb;
overflow:hidden;
-webkit-transition:color 0.3s;
transition:color 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);
transition-timing-function:cubic-bezier(0.75,0,0.125,1);
}
.button—quidel.button—inverted {
background:#fff;
color:#fff;
}
.button—quidel::before,.button—quidel::after {
content:’’;
position:absolute;
z-index:-1;
border-radius:inherit;
}
.button—quidel::after {
top:2px;
left:2px;
right:2px;
bottom:2px;
background:#fff;
}
.button—quidel.button—inverted::after {
background:#37474f;
}
.button—quidel::before {
background:#37474f;
top:0;
left:0;
width:100%;
height:100%;
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
-webkit-transition:-webkit-transform 0.3s;
transition:transform 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);
transition-timing-function:cubic-bezier(0.75,0,0.125,1);
}
.button—quidel.button—inverted::before {
background:#7986cb;
}
.button—round-s.button—quidel::after {
border-radius:3px;
}
.button—round-m.button—quidel::after {
border-radius:13px;
}
.button—round-l.button—quidel::after {
border-radius:40px;
}
.button—quidel > span {
padding-left:0.35em;
}
.button—quidel:hover {
color:#37474f;
}
.button—quidel.button—inverted:hover {
color:#7986cb;
}
.button—quidel
:before {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
系统管理员
桃扇骨
左手的ㄟ右手
「爱情、让人受尽委屈。」
太过爱你忘了你带给我的痛
还没有评论，来说两句吧...