امروز در یک آموزش بسیار ساده اما کاربردی شیوه ساختن یک دکمه سه بعدی را برای شما آموزش خواهیم داد. نکات اصلی 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]
دریافت مستقیم فایل : کلیک کنید
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
خوب بود اتفاقی از گوگل اومدم اینجا ولی خوب بود برای دوستم فرستادم اونم دنبالشه اونم بیاد ببینه
ممنون که سرعت سایتتون بالاست برای این تو خیلی از سایتا رفتم ولی سرعت سایتشون بد بود خداروشکر که راحت چیزی که میخواستم پیدا کردم
ممنون