Prepare a transparent picture
Achieve results
Html
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>CSS3 Animated Bubble Buttons | Tutorialzine Demo</title><Linkrel= "stylesheet"type= "Text/css"href= "Css/page.css" /><Linkrel= "stylesheet"type= "Text/css"href= "Buttons/buttons.css" /></Head><Body><DivID= "Buttoncontainer"> <ahref="#"class= "button Big Blue">Big Button</a> </Div><Divstyle= "margin:20px Auto"><ahref="#"class= "Button2">Big Button</a> </Div> </Body></HTML>
CSS Styles
. Button{Font:15px Calibri, Arial, Sans-serif;Text-shadow:1px 1px 0 rgba (255,255,255,0.4);text-decoration:None!important;White-space:nowrap;Display:Inline-block;vertical-align:Baseline;position:relative;cursor:Pointer;padding:10px 20px;background-repeat:no-repeat;background-position:Bottom Left;Background-image:url (' button_bg.png ');background-position:bottom left, top right, 0 0, 0 0;Background-clip:Border-box;-moz-border-radius:8px;-webkit-border-radius:8px;Border-radius:8px;-moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;Box-shadow:0 0 1px #fff inset;-webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s;}. Button:hover{background-position:Top Left;background-position:top left, bottom right, 0 0, 0 0;}. Button.big{font-size:30px;}. Blue.button{Color:#0f4b6d!important;Border:1px solid #84acc3!important;Background-color:#48b5f2;Background-image:url (' button_bg.png '), url (' button_bg.png '),-moz-radial-gradient (center bottom, Circle,rgba (89, 208,244,1) 0,rgba (89,208,244,0) 100px),-moz-linear-gradient (#4fbbf7, #3faeeb);Background-image:url (' button_bg.png '), url (' button_bg.png '),-webkit-gradient (radial, 50% 100%, 0, 50% 100%, 100 , from (Rgba (89,208,244,1)), to (Rgba (89,208,244,0))),-webkit-gradient (linear, 0% 0, 0% 100%, from (#4fbb F7), to (#3faeeb));}. Blue.button:hover{Background-color:#63c7fe;Background-image:url (' button_bg.png '), url (' button_bg.png '),-moz-radial-gradient (center bottom, Circle,rgba (109 , 217,250,1) 0,rgba (109,217,250,0) 100px),-moz-linear-gradient (#63c7fe, #58bef7);Background-image:url (' button_bg.png '), url (' button_bg.png '),-webkit-gradient (radial, 50% 100%, 0, 50% 100%, 100 , from (Rgba (109,217,250,1)), to (Rgba (109,217,250,0))),-webkit-gradient (linear, 0% 0, 0% 100%, from (#63 C7FE), to (#58bef7));}
Good-looking button animations