20 نمونه آیکون شبکه های اجتماعی با CSS

آیکون شبکه های اجتماعی

مجموعه بی نظیر از آیکون شبکه های اجتماعی استفاده شده در وب سایت که با html و css ساخته شده است. در ادامه می توانید این مجموعه بی نظیر و کدهای اماده آن را دانلود کنید و در وب سایت خود استفاده کنید.

DARK SOCIAL ICONS

طراح: Metty – November 18, 2018                                             نوشته شده با: CSS / HTML

دمو و کد

درباره کد

نام این آیکون، DARK SOCIAL ICONS به معنای آیکون تیره برای شبکه های اجتماعی می باشد که جذابیت خاصی به سایت شما می دهد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


Social media icons with hover and inverse actions.

طراح: matt henley – October 20, 2018                                             نوشته شده با: CSS / HTML

دمو و کد

درباره کد

این آیکون به نام Social media icons with hover and inverse actions می باشد. و هنگامی که موس روی آن هاور می شود تغییر ظاهر می دهد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


SOCIAL MEDIA 3D GHOST BUTTONS

طراح: Ashish Anand – October 3, 2018                                            نوشته شده با: CSS / HTML

دمو و کد

درباره کد

این آیکون به نام SOCIAL MEDIA 3D GHOST BUTTONS می باشد. هنگامی که موس روی آیکون ها هاور می شود افکت های سه بعدی ایجاد می گردد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


3D - CSS SOCIAL TILES

طراح:Stockin – September 28, 2018                                           نوشته شده با: CSS / HTML

دمو و کد

درباره کد

این آیکون به نام 3D – CSS SOCIAL TILES می باشد. شکلی شبیه به سفال و کاشی دارند و هنگامی که موس روی آیکون ها هاور می شود افکت های سه بعدی ایجاد می گردد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


Floating social media icons in HTML and CSS.

طراح:Stockin – September 27, 2018                                           نوشته شده با: CSS / HTML

دمو و کد

درباره کد

این آیکون به نام Floating social media icons in HTML and CSS می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


THE SOCIAL DRAWER

طراح: Nour Saud – February 13, 2018                                           نوشته شده با: CSS (SCSS) / HTML

دمو و کد

درباره کد

این آیکون به نام THE SOCIAL DRAWER می باشد. طراحی حالت کشویی برای لینک شبکه های اجتماعی

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari


Social icons with vision 3D effect in HTML and CSS.

طراح: Miguel Cast – July 6, 2017                                          نوشته شده با: CSS (SCSS) / HTML

دمو و کد

درباره کد

این آیکون به نام Social icons with vision 3D effect in HTML and CSS می باشد.

مرورگرهای سازگار:               Chrome, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


Pure CSS social buttons.

طراح: Dariusz Syncerek – June 11, 2017                                          نوشته شده با: CSS (SCSS) / HTML

دمو و کد

درباره کد

این آیکون به نام Pure CSS social buttons می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


CSS3 SOCIAL BUTTONS VOL.2

طراح: fox_hover – March 27, 2017                                          نوشته شده با: CSS (SCSS) / HTML

دمو و کد

صفحه گیت هاب

درباره کد

این آیکون به نام CSS3 SOCIAL BUTTONS VOL.2 می باشد. این نمونه از آیکون با استفاده از CSS3 طراحی شده است.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


CSS3 SOCIAL BUTTONS VOL.1

طراح: fox_hover – March 5, 2017                                          نوشته شده با: CSS (SCSS) / HTML

دمو و کد

صفحه گیت هاب

درباره کد

این آیکون به نام CSS3 SOCIAL BUTTONS VOL.1 می باشد. این نمونه از آیکون با استفاده از CSS3 طراحی شده است.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


ONLY CSS DIRECTION-AWARE CUBE SOCIAL LINKS

طراح: Gabrielle Wee – January 20, 2017                                          نوشته شده با:  (CSS (SCSS) / HTML (Haml

دمو و کد

درباره کد

این آیکون به نام ONLY CSS DIRECTION-AWARE CUBE SOCIAL LINKS می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari


SOCIAL BUTTONS WITH TOOLTIPS

طراح: Luis Espinosa – August 29, 2016                                          نوشته شده با:  (CSS (SCSS) / HTML (Pug

دمو و کد

درباره کد

این آیکون به نام SOCIAL BUTTONS WITH TOOLTIPS می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              ionicons.css


SOCIAL CONNECT

طراح: Anthony Koch – October 23, 2015                                         نوشته شده با:  / JavaScript / CSS  / HTML

دمو و کد

dribbble page

درباره کد

این طرح در سایت دریبل موجود است که توسط Paul Flavius Nechita طراحی گردیده است. با وجود اینکه طرح بسیاری ساده ای می باشد اما از طرح های مورد علاقه ما می باشد

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              ionicons.css


CLEAN SOCIAL BUTTONS

طراح: Michael Rossi – October 21, 2015                                       نوشته شده با:  CSS (Less) / HTML

دمو و کد

درباره کد

این طرح به نام CLEAN SOCIAL BUTTONS می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


STYLISH SOCIAL BUTTONS

طراح: Chris Deacy  – March 20, 2015                                       نوشته شده با: (HTML (Pug) / CSS (Stylus)

دمو و کد

dribbble

درباره کد

این طرح به نام STYLISH SOCIAL BUTTONS می باشد. چند دکمه اجتماعی جالب با انیمیشن های صاف.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              font-awesome.css


SVG SOCIAL ICONS

طراح: Kevin Dewar – March 13, 2015                                       نوشته شده با: (HTML  / CSS (SCSS

دمو و کد

درباره کد

این طرح به نام SVG SOCIAL ICONS می باشد. آیکون های اجتماعی دایره ای با SVG، HTML و CSS.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari


HTML and CSS social diamond links.

طراح: Sazzad – February 11, 2015                                       نوشته شده با: HTML  / CSS

دمو و کد

درباره کد

این طرح به نام SOCIAL LINKS – HTML and CSS social diamond links می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                            font-awesome.css


Social media hover icons with pop-up titles.

طراح: Kieran Hunter – November 13, 2014                                       نوشته شده با: HTML  / CSS

دمو و کد

درباره کد

این طرح به نام SOCIAL MEDIA ICONS – Social media hover icons with pop-up titles می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                            font-awesome.css


Social media icon reveal with transition

 

طراح: Stefan Göllner – June 17, 2013                                      نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

این طرح به نام Social media icon reveal with transition. می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                            font-awesome.css


SOCIAL FLIP CARDS

طراح: Charlotte Dann – August 5, 2012                                      نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

این طرح به نام SOCIAL FLIP CARDS – Messing around with 3d transforms and delayed transitions  می باشد.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari


Avatar

95 درصد از آن‌ چیزی را که به دیگران می‌آموزیم برای همیشه در ذهن ما ماندگار می گردد.

    ارسال دیدگاه

    * .ایمیل ادرس شما منتشر نخواهد شد