/* ===================================================================== DEMO 2 ===================================================================== */ .circle { background: rgb(255,255,255); border-radius: 100%; cursor: pointer; position: relative; margin: 0 auto; width: 15em; height: 15em; overflow: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .circle h1 { color: rgba(189, 185, 199,0); font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.6em; line-height: 8.2em; text-align: center; text-transform: uppercase; -webkit-font-smoothing: antialiased; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: color 0.8s ease-in-out; -moz-transition: color 0.8s ease-in-out; -ms-transition: color 0.8s ease-in-out; transition: color 0.8s ease-in-out; } .circle:before, .circle:after { border-radius: 100%; content:""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2); -webkit-transition: box-shadow 0.75s; -moz-transition: box-shadow 0.75s; -ms-transition: box-shadow 0.75s; transition: box-shadow 0.75s; } .circle:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .circle:hover:before, .circle:hover:after { box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5); } .circle:hover > h1 { color: rgba(185, 185, 185,1); }