<!DOCTYPE html> <html> <head> <title>Animation Demo</title> <style type="text/css"> body { color: #fff; font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; } .box { background: #2db34a; border-radius: 6px; cursor: pointer; height: 95px; line-height: 95px; text-align: center; transition-property: background, border-radius; transition-duration: 1s; transition-timing-function: linear; width: 95px; } .box:hover { background: #ff7b29; border-radius: 50%; } </style> </head> <body> <div class="box">Box</div> </body> </html>