آموزش طراحی دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی در CSS

,

امروزه دکمه‌های شبکه‌های اجتماعی بخش مهمی از طراحی رابط کاربری (UI) هستند. در این مقاله، یاد می‌گیرید چگونه دکمه‌های مربعی با چرخش ۴۵ درجه طراحی کنید که هنگام هاور رنگ پس‌زمینه آنها به رنگ رسمی هر شبکه اجتماعی تغییر کند.

ابزارهای مورد نیاز

  • HTML5 (برای ساختار)

  • CSS3 (برای استایل‌دهی و افکت‌ها)

  • Font Awesome (برای آیکون‌ها)

آموزش گام‌به‌گام

۱. ساختار HTML

کد زیر چارچوب اصلی دکمه‌ها را ایجاد می‌کند:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه‌های شبکه‌های اجتماعی</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

۲. استایل‌دهی با CSS

در این بخش، افکت‌های سه‌بعدی و تغییر رنگ را پیاده‌سازی می‌کنیم:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: white;
}

.social-buttons {
    display: flex;
    gap: 15px;
}

.social-btn {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #555;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.social-btn i {
    transform: rotate(-45deg);
    transition: all 0.3s ease;
}

/* تغییر رنگ هنگام هاور */
.whatsapp:hover { background: #25D366; }
.twitter:hover { background: #1DA1F2; }
.youtube:hover { background: #FF0000; }
.linkedin:hover { background: #0077B5; }

.social-btn:hover i {
    color: white;
    transform: rotate(-45deg) scale(1.1);
}

کد نهایی آماده برای استفاده

کدهای زیر را می‌توانید در هر پروژه وب‌سایتی استفاده کنید. این کدها شامل HTML و CSS کامل برای ایجاد دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه‌های شبکه‌های اجتماعی</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: white;
        }
        .social-buttons {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #555;
            background: #f0f0f0;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            transform: rotate(45deg);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .social-btn i {
            transform: rotate(-45deg);
            transition: all 0.3s ease;
        }
        .whatsapp:hover { background: #25D366; }
        .twitter:hover { background: #1DA1F2; }
        .youtube:hover { background: #FF0000; }
        .linkedin:hover { background: #0077B5; }
        .social-btn:hover i {
            color: white;
            transform: rotate(-45deg) scale(1.1);
        }
    </style>
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

نحوه استفاده از این کدها:

  1. کدهای بالا را در یک فایل با پسوند .html ذخیره کنید.

  2. می‌توانید این کدها را در هر پروژه وب‌سایتی (مانند سایت‌های استاتیک یا سیستم‌های مدیریت محتوای غیر از وردپرس) استفاده کنید.

  3. برای تغییر رنگ‌ها یا اندازه دکمه‌ها، مقادیر CSS را ویرایش کنید.

 

نظر شما چیست؟

اگر این آموزش برایتان مفید بود یا پیشنهادی برای بهبود دارید، خوشحال می‌شویم در بخش نظرات با ما در میان بگذارید!

/0 دیدگاه /توسط
0 پاسخ

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

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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