مجموعه ۱۱ تا از بهترین دکمه های شبکه های اجتماعی ساخته شده با CSS3
سلام دوستان؛ در این مطلب میخواهیم مجموعه ۱۱ تا از بهترین دکمه های شبکه های اجتماعی که توسط CSS3 و html ساخته شده اند را به شما معرفی کنیم. این دکمه ها به صورت انیمیشنی بوده و زمانی که موس روی آنها قرار میگیرد به صورت انیمیشنی تغییر حالت میدهند. اگر برای سایتتان میخواهید دکمه های شبکه های اجتماعی را قرار دهید پیشنهاد میکنیم حتما از یکی از این مجموعه ها استفاده کنید.
زمانی که فایل دکمه را دانلود کردید، کد های html و CSS آن را باهم دریافت میکنید. کافیست این کد ها را وارد پروژه تان کنید.
آیکون های استایل دهی شده Font Awesome
این دکمه ها شامل آیکون های مجموعه Font Awesome هستند. پس از اینکه فایل را دانلود کردید باید Font Awesome را هم نصب کنید.
لینک ها:
دکمه های شبکه های اجتماعی شیک
این مجموعه دارای دکمه های بسیار شیک شبکه های اجتماعی است. زمانی که روی آن موس را قرار میدهید یک افکت بسیار جذاب و شیک ظاهر میشود.
لینک ها:
مجموعه ای از دکمه های شبکه های اجتماعی
در این مجموعه چند حالت و شکل مختلف از دکمه های شبکه های اجتماعی را میبینید.
لینک ها:
دکمه های شبکه های اجتماعی ساده و زیبا با CSS3
زمانی که موس روی این دکمه ها قرار میگیرد یک افکت رولی به همراه چرخش آیکون انجام میشود. افکت ساده و زیبا است.
لینک ها:
دکمه هایی خیال انگیز
این دکمه ها هم بسیار جذاب طراحی شده اند. وقتی موس روی آن ها قرار میگیرد به نرمی از حالت مربع به دایره تبدیل میشوند.
لینک ها:
افکت شناور فانتزی
این دکمه ها به صورتی جذاب و فانتزی از قرار گرفتن موس بر روی خودشان تاثیر می پذیرند.
لینک ها:
دکمه هایی خوشمزه!
پیش نمایش را ببینید. یک افکت جذاب و ساده.
لینک ها:
دکمه های شبکه اجتماعی اسلایدی
وقتی موس را روی این دکمه ها قرار میدهید، به صورت اسلایدی یک دکمه برای اشتراک گذاری ظاهر می شود.
لینک ها:
دکمه های شبکه های اجتماعی در فوتر
این دکمه ها که به صورت Long Shadow یا سایه بلند طراحی شده اند، مخصوص فوتر سایت هستند.
لینک ها:
دکمه های شبکه های اجتماعی دایره ای
این دکمه ها به صورت دایره ای طراحی شده اند و زمانی که موس روی آنها قرار گیرد بزرگ شده و فاصله بردر از دکمه بیشتر میشود.
لینک ها:
بخش اجتماعی
یک مجموعه از دکمه های اجتماعی با افکت زوم زیبا. وقتی که موس روی این دکمه ها قرار میگیرد، سایز آن ها به نرمی بزرگتر می شود.
لینک ها:
امیدواریم لذت برده باشید.
به فونت آیکون هم نیاز دارید؟ در لینک زیر ۳۰ مجموعه برتر فونت آیکون را قرار داده ایم:
چه جوری باید از اینا استفاده کرد ؟؟
سلام
باید کد html درون سند اچ تی ام ال و کد های CSS هم درون فایل استایل با فرمت .css قرار بگیرند.
سلام وقتی از این کدها استفاده میکنم به صورت ساده نمایش داده میشه یعنی لینک ابی رنگ قرار میگیره هرکارییم میکنم درست نمیشه ب سایت کدپن هم همیشه سر میزنم و انواع این کدهارودیدم… لطفا راهنمایی کنید که چطوری قرار بدم…سپاس از لطفتون
سلام
شما باید کد های css رو هم به فایل استایل خودتون اضافه کنید. اگر اینکار رو میکنید و مشکل همچنان پابرجاست، احتمالا فایل استایل شما درست فراخوانی نشده و باز نمیشه.