css动画浮动,CSS3按钮悬停背景浮动动画

CSS

语言：

CSSSCSS

确定

*, *:before, *:after {

margin: 0;

padding: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box; }

body {

padding-top: 10%;

text-align: center; }

.btn-split {

position: relative;

display: inline-block;

padding: 0 2rem;

font-family: 'Titillium Web', sans-serif;

font-weight: 700;

text-decoration: none;

font-size: 3rem;

line-height: 4.5rem;

color: #333;

background-image: -webkit-gradient(linear, left top, left bottom, from(tomato), to(tomato));

background-image: -webkit-linear-gradient(tomato, tomato);

background-image: linear-gradient(tomato, tomato);

-webkit-background-size: 100%;

background-size: 100%;

border-bottom: 5px solid tomato; }

.btn-split:before {

content: attr(name);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));

background-image: -webkit-linear-gradient(#333, #333);

background-image: linear-gradient(#333, #333);

-webkit-background-size: 100%;

background-size: 100%;

color: white;

-webkit-transition: all 0.5s;

transition: all 0.5s; }

.btn-split:hover:before {

height: 5px; }