آموزش ایجاد دکمه سه بعدی در CSS

  • آخرین بروزرسانی در سه‌شنبه 22 سپتامبر 2020

    Average rating 5 / 5. Vote count: 1

دکمه سه بعدی می تواند در موارد مختلف، آیتم خوبی در رابط کاربری وب سایت یا اپلیکیشن شما باشد. در این آموزش با چند خط کد CSS دکمه های سه بعدی می سازیم.

کافی است برای استفاده از دکمه های سه بعدی که در ادامه می بینید، کد CSS آن ها را در فایل استایل خود کپی و همچنین از کلاس آن در المنت HTML خود استفاده کنید.

این دکمه ها دارای انیمیشن در حالت hover و click نیز هستند.

آموزش ساخت دکمه سه بعدی با CSS

کد HTML

برای قرار دادن دکمه های سه بعدی خود می بایست ابتدا المنت آن ها را در HTML ایجاد کنیم.

<body>
    <a href="#" class="btn b-1">
        Button 1 (.b-1)
    </a>
    <a href="#" class="btn b-2">
        Button 2 (.b-2)
    </a>
    <a href="#" class="btn b-3">
        Button 3 (.b-3)
    </a>
</body>

در HTML خود سه دکمه با دو کلاس تعریف کردیم. کلاس btn خصوصیت های کلی دکمه را در بر می گیرد.

اما کلاس b-x خصوصیت های هر یک از سه دکمه ای که در ادامه تعریف می کنیم را دارد.

کد CSS

خصوصیت های کلی CSS

حالا بخش CSS کد های خود را وارد داستان می کنیم.

.btn {
  color: #e5dc15;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  margin: 1rem;
  padding: 0.5rem;
  border: 2px solid #e5dc15;
  border-radius: 0.5rem;
}

.btn:hover {
  background: #e5dc15;
  color: #0e79b2;
}

یک سری خصوصیت های کلی را برای رنگ دکمه ها و حاشیه تا به این جا تعریف کردیم.

خصوصیت کلی دکمه های سه بعدی
خصوصیت کلی دکمه های سه بعدی

خصوصیت سه بعدی

خوب ما اسم این خصوصیت رو سه بعدی گذاشتیم چرا که از shadow یا سایه در بعد سوم استفاده می کنیم.

این خصوصیت رو به کلاس .btn اضافه می کنیم.

box-shadow: 0 0.6em #c2bb11, 0 0.9em rgba(0, 0, 0, 0.4);

کاری که کد بالا انجام می دهد این است که دو Shadow یا سایه تعریف می کند.

اولین مقدار فاصله از محور افقی (که طبیعتا باید صفر باشد).

دومین مقدار فاصله از محور عمودی است که برای آن رنگ در نظر گرفتیم.

با استفاده از رنگ زرد تیره تر یک سایه می دهیم تا دکمه شکلی سه بعدی بگیرد.

سپس سایه خاکستری هم به دکمه می دهیم.

خصوصیت Transitions

حالا سه خصوصیت به کلاس .btn اضافه می کنیم که در واقع اساس transition و نقطه شروع را تعیین می کند.

  position: relative;
  top: 0;
  transition: all 300ms ease-in-out;

transitions دکمه ها

حالا سه :hover و :active متفاوت برای سه دکمه ای که در ادامه می بینید تعریف می کنیم.

b-1

اولین دکمه زمانی که اشاره گر موس روی آن قرار می گیرد و زمانی که روی آن کلیک می شود، پایین تر می آید.

.btn.b-1:hover {
  top: 0.2em;
  box-shadow: 0 0.4em #c2bb11, 0 0.7em rgba(0, 0, 0, 0.4);
}

.btn.b-1:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}
خصوصیت های دکمه B1
خصوصیت های دکمه سه بعدی B1

b-2

دومین دکمه نیازی نیست در زمان قرار گیری اشاره گر روی آن کاری انجام شود ولی در زمان کلیک شدن پایین تر می آید.

 .btn.b-2:active {
  top: 0.6em;
  box-shadow: 0 0.2em rgba(0, 0, 0, 0.4);
}
خصوصیت های دکمه B2
خصوصیت های دکمه سه بعدی B2

b-3

در سومین دکمه زمانی که اشاره گر روی آن قرار می گیرد دکمه را کمی می کشیم و رویدادی که برای کلیک دکمه اول در نظر گرفتیم را روی آن پیاده سازی می کنیم.

برای کشیدن دکمه از خصوصیت bottom یا top با مقدار منفی در css استفاده می کنیم.

.btn.b-3:hover {
  top: -0.5em;
  box-shadow: 0 0.6em #c2bb11, 0 1.3em rgba(0, 0, 0, 0.4);
}

.btn.b-3:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}
خصوصیت های دکمه B3
خصوصیت های دکمه سه بعدی B3

کد آماده دکمه های سه بعدی

می توانید نتیجه کد های بالا را که سه دکمه سه بعدی با افکت های مختلف است را با کلیک بر روی دکمه اجرا در کادر زیر ببینید.

همچنین برای استفاده از دکمه های در پروژه ها یا وب سایت خود می بایست یک المنت a یا button داخل تگ body فایل html خود قرار دهید که یکی از کلاس های btn b-1، btn b-2 یا btn b-3 به آن داده شده است.

سپس کد های CSS که در کد زیر داخل تگ <style> قرار گرفته را به فایل استایل قالب خود انتقال دهید یا حتی می توانید مانند نمونه زیر در بین تگ <style> و در داخل فایل html خود استفاده کنید.

    <a href="#" class="btn b-1">
      Button 1 (.b-1)
    </a>
    <a href="#" class="btn b-2">
      Button 2 (.b-2)
    </a>
    <a href="#" class="btn b-3">
      Button 3 (.b-3)
    </a>


<style>
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0e79b2;
}

.btn {
  color: #e5dc15;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  margin: 1rem;
  padding: 0.5rem;
  border: 2px solid #e5dc15;
  border-radius: 0.5rem;
  position: relative;
  top: 0;
  transition: all 300ms ease-in-out;
  box-shadow: 0 0.6em #c2bb11, 0 0.9em rgba(0, 0, 0, 0.4);
}

.btn:hover {
  background: #e5dc15;
  color: #0e79b2;
}

.btn.b-1:hover {
  top: 0.2em;
  box-shadow: 0 0.4em #c2bb11, 0 0.7em rgba(0, 0, 0, 0.4);
}

.btn.b-1:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}

.btn.b-2:active {
  top: 0.6em;
  box-shadow: 0 0.2em rgba(0, 0, 0, 0.4);
}

.btn.b-3:hover {
  top: -0.5em;
  box-shadow: 0 0.6em #c2bb11, 0 1.3em rgba(0, 0, 0, 0.4);
}

.btn.b-3:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}

</style>
برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!

دیدگاه خود را بیان کنید

@