Css3 animation

I would like to explore some interesting css3 effects using border and radius

Border Radius Animation

All you need to do use the following css properties

.bradius { padding: 20px 40px; color: #fff; background-color: #0071bc; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .bradius:hover { color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

Border line Animation

.bradius-line a { padding: 20px 40px; color: #0071bc; margin:20px auto; width:40%; display:inline-block; position: relative; text-align:center; text-decoration: none; } .bradius-line a:after { color: #0071bc; display: block; position: absolute; left: 0; bottom: -10px; width: 0; height: 10px; background-color: #0071bc; content: ""; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .bradius-line a:hover:after { width: 100%; }

All working demos available here https://jsfiddle.net/Lzu1nosp/

Akhil Gopinath image
Post by Akhil Gopinath