ساخت دکمه سه بعدی با 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=””]

<button>click me!</button>

[/box]

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

1 نظر

  1. خوب بود اتفاقی از گوگل اومدم اینجا ولی خوب بود برای دوستم فرستادم اونم دنبالشه اونم بیاد ببینه

    ممنون که سرعت سایتتون بالاست برای این تو خیلی از سایتا رفتم ولی سرعت سایتشون بد بود خداروشکر که راحت چیزی که میخواستم پیدا کردم

    ممنون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کلاس طراحی سایت