HTML
<button>hover & click</button>
CSS
body { background : #1b1b1b; } button { position: relative; display : block; padding : 15px 60px; margin : 70px auto; overflow : hidden; transition : all .2s; font-size : 20px; font-weight: bold; font-style : italic; font-family: georgia; color : #000; cursor : pointer; border-radius : 10px; background : -webkit-linear-gradient(top , #eed200 , #eed200); background : -moz-linear-gradient(top , #eed200 , #eed200); border : 1px solid #ff0; box-shadow : 0 7px 0 0 #880; text-transform: capitalize; text-shadow : 1px 1px 0 rgba(255, 255, 255, 0.5); } button:after { display : block; content : ''; width : 60px; height : 100%; position: absolute; top : 0; left : -68px; background : -webkit-linear-gradient(left,#ffff05 10% ,transparent 0 , transparent 20% , #ffff05 0); background : -moz-linear-gradient(left,#ffff05 10% ,transparent 0 , transparent 20% , #ffff05 0); z-index : 1; transform : skew(-18deg); transition : left .5s cubic-bezier(1,0,0,1); } button:hover:after { left : 103%; transition : left .3s linear; } button:active { box-shadow : none; transform : translateY(7px); transition : all .3s; }
Java script
ندارد
دموی آنلاین
تا بارگذاری کامل کمی صبر کنید
See the Pen odgAz by Mojtaba Seyedi (@new) on CodePen