CSS3 button Effects

1. Example

2.HTML Code

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Css3-fade</title>    <Linkrel= "stylesheet"type= "Text/css"href= "./fade.css"></Head><Body>    <Divclass= "Container">        <Divclass= "Fade Fade-in">fade-in</Div>        <Divclass= "Fade Fade-top">Fade-top</Div>        <Divclass= "Fade Fade-bottom">Fade-bottom</Div>        <Divclass= "Fade Fade-left">Fade-left</Div>        <Divclass= "Fade Fade-right">Fade-right</Div>        <Divclass= "Fade Bounce-top">Bounce-top</Div>        <Divclass= "Fade Bounce-bottom">Bounce-bottom</Div>        <Divclass= "Fade Bounce-left">Bounce-left</Div>        <Divclass= "Fade Bounce-right">Bounce-right</Div>        <Divclass= "Fade Fade-center-out">Fade-center-out</Div>        <Divclass= "Fade Fade-center-in">fade-center-in</Div>        <Divclass= "Fade Fade-middle-out">Fade-middle-out</Div>        <Divclass= "Fade Fade-middle-in">fade-middle-in</Div>    </Div></Body></HTML>

3.CSS Code

*{padding:0;margin:0;}HTML{background:-webkit-radial-gradient (#222222, #000000);background:radial-gradient (#222222, #000000);Height:100%;text-align:Center;width:100%;}. Container{width:800px;margin:200px Auto;text-align: Left;}. Fade{cursor:Pointer;box-sizing:Border-box;Display:Inline-block;Color:#09f;background: White;padding:10px 20px;text-align:Center;margin:10px 0;/*Set relative positioning*/position:relative;transition:All 0.3s;/*the setting hierarchy is before after*/Z-index:1;}. Fade:hover{Color: White;}/*actually, it's possible to use a background color change, but here for unification .*/. Fade:before,.fade:after{Display:Block;transition:All 0.3s;background:#09f;position:Absolute;content:"';Z-index:-1;}. Fade-left:before,.fade-right:before,.fade-center-out:before,.fade-center-out:after,.fade-center-in:before ,. Fade-center-in:after,.bounce-left:before,.bounce-right:before{Height:100%;Top:0;width:0;}. Fade-middle-out:before,.fade-middle-out:after,.fade-middle-in:before,.fade-middle-in:after,.bounce-bottom : Before{Height:0;width:100%; Left:0;}/*bouncing elements setting the timeline using three Bezier curves*/. Bounce-top:before,.bounce-bottom:before,.bounce-left:before,.bounce-right:before{transition-timing-function:Cubic-bezier (0.52, 1.7, 0.5, 0.4);}. Fade-in:before{Height:100%;width:100%;Opacity:0;Top:0; Left:0;}. Fade-bottom:before,. Fade-top:before,.bounce-top:before{Height:0;width:100%; Left:0;}. Fade-top:before,.bounce-top:before,.fade-middle-out:before{Top:0;}. Fade-bottom:before,.fade-middle-out:after,.bounce-bottom:before{Bottom:0;}. Fade-left:before,.fade-center-in:before,.bounce-left:before{ Left:0;}. Fade-right:before,.fade-center-in:after,.bounce-right:before{ Right:0;}. Fade-center-out:before{ Right:50%}. Fade-center-out:after{ Left:50%}. Fade-middle-in:before{Bottom:50%;}. Fade-middle-in:after{Top:50%;}. Fade-in:hover:before{Opacity:1;}. Fade-left:hover:before,.fade-right:hover:before,.bounce-left:hover:before,.bounce-right:hover:before{width:100%;}. Fade-top:hover:before,.fade-bottom:hover:before,.bounce-top:hover:before,.bounce-bottom:hover:before{Height:100%;}. Fade-center-out:hover:before,.fade-center-out:hover:after,.fade-center-in:hover:before,.fade-center-in: Hover:after{width:50%;}. Fade-middle-out:hover:before,.fade-middle-out:hover:after,.fade-middle-in:hover:before,.fade-middle-in: Hover:after{Height:50%;}

CSS3 button Effects