ساخت دکمه سه بعدی با translate

امروز در یک آموزش بسیار ساده اما کاربردی شیوه ساختن یک دکمه سه بعدی را برای شما آموزش خواهیم داد. نکات اصلی box-shadow بدون درصد محوشوندگی در پله اول و translate دقیقا به همان اندازه سایه در پله دوم است.

سودو سلکتور برای انجام عمل کلیک :active میباشد.

قسمت استایل های کد فوق :

[box type=”success” align=”aligncenter” class=”” width=””]

<style>

*, ::after, ::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
button{
width: 200px;
height: 50px;
border: none;
background: green;
color: white;
margin: 100px 40%;
box-shadow: 2px 2px gray;
cursor: pointer
}
button:active{
box-shadow: none;
transform: translate(2px, 2px);
}
</style>

[/box]

قسمت HTML کد فوق:

[box type=”success” align=”aligncenter” class=”” width=””]

[/box]

دریافت مستقیم فایل : کلیک کنید