html5动效开发工具,HTML5 简单的原质化风格的按钮动效

CSS

语言：

CSSSCSS

确定

html {

width: 100%;

height: 100%;

}

body {

background: -webkit-linear-gradient(left, #25c481, #25b7c4);

background: linear-gradient(to right, #25c481, #25b7c4);

}

a {

text-decoration: none;

}

.button-effect {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

padding: 15px 25px;

text-transform: uppercase;

color: yellow;

background-color: transparent;

border: 3px solid yellow;

overflow: hidden;

}

.button-effect:hover {

cursor: pointer;

}

.effect-wave {

position: absolute;

width: 0px;

height: 0px;

border-radius: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

background-color: yellow;

opacity: 0.5;

}