#boton1,#boton2,#boton3,#boton4,#boton5{ background:#dadada; border:solid 1px #dadada; padding:7px; width:100px; text-align:center; transition:all 2s; } #boton1{ border-top-left-radius:20px; border-bottom-right-radius:20px; color:#fff; background:-moz-linear-gradient(#093 0%, #0C0 100%); background:-webkit-linear-gradient(#093 0%, #0C0 100%); } #boton1:hover{ border-top-left-radius:0px; border-bottom-right-radius:0px; border-bottom-left-radius:10px; border-top-right-radius:10px; background:-moz-linear-gradient(#0C0 0%, #093 100%); background:-webkit-linear-gradient(#0C0 0%, #093 100%); } #boton2{ border-top-right-radius:100px; border-bottom-left-radius:100px; color:red; background:-moz-linear-gradient(#CF0 0%, #CF0 100%); background:-webkit-linear-gradient(#CF0 0%, #CF0 100%); } #boton2:hover{ border-top-right-radius:0px; border-bottom-left-radius:0px; border-bottom-right-radius:100px; border-top-left-radius:100px; color:red; background:-moz-linear-gradient(#CF0 0%, #9F0 100%); background:-webkit-linear-gradient(#CF0 0%, #CF0 100%); } #boton3{ border-top-right-radius:20px; border-top-left-radius:20px; color:#FFF; background:-moz-linear-gradient(#999 0%, #fff 100%); background:-webkit-linear-gradient(#999 0%, #fff 100%); } #boton3:hover{ background:-moz-linear-gradient(#F60 0%, #FC6 100%); background:-webkit-linear-gradient(#F60 0%, #FC6 100%); } #boton4{ border-radius:20px; color:#FFF; background:-moz-radial-gradient(#F00 0%, #FF0 100%); background:-webkit-radial-gradient(#F00 0%, #FF0 100%); } #boton4:hover{ background:-moz-linear-gradient(#F90 0%, #F65 100%); background:-webkit-linear-gradient(#F90 0%, #F65 100%); } #boton5{ border-radius:5px; color:#09F; background:-moz-linear-gradient(#dadada 0%, #fff 80%); background:-webkit-linear-gradient(#dadada 0%, #fff 80%); } #boton5:hover{ background:-moz-linear-gradient(#fff 0%, #dadada 80%); background:-webkit-linear-gradient(#fff 0%, #dadada 80%); }