Hover the mouse over the Animation button implemented in pure css3, and hover the button implemented in css3

Hover the mouse over the Animation button implemented in pure css3, and hover the button implemented in css3

Today, we bring you a CSS-only Animation button that allows you to hover over the mouse. This button is in the form of a square before the mouse passes. When the mouse passes, it is converted into a circle in the form of an animation. As follows:

Download Online Preview source code

Implementation code.

Html code:

<div>        <span></span>    </div>

Css3 code:

 body        {            background-color: #333;        }        div        {            width: 200px;            height: 200px;            margin: 0 auto;        }        span        {            position: relative;            width: 180px;            height: 180px;            display: block;            margin: auto;            top: 25px;            border: 20px solid rgba(255, 255, 0, .25);            background-color: rgba(124,155,13,1);            -webkit-transition: .5s;            -moz-transition: .5s;            -ms-transition: .5s;            transition: .5s;            border-radius: 30px 0px 30px 0px;        }        span:before, span:after        {            position: absolute;            display: block;            background-color: #fff;            border-radius: 10px;            margin: auto;            top: 0px;            bottom: 0px;            left: 0px;            right: 0px;        }        span:before        {            width: 100px;            height: 10px;            content: "";        }                span:after        {            width: 10px;            height: 100px;            content: "";        }                div:hover span        {            -webkit-transform: scale(.5) rotate(45deg);            -moz-transform: scale(.5) rotate(45deg);            -ms-transform: scale(.5) rotate(45deg);            transform: scale(.5) rotate(45deg);            border-radius: 110px;            background-color: rgba(112,18,255,1);        }

Via: http://www.w2bc.com/Article/13275