مقدمه
سلام خدمت دوستان و همراهان عزیز سایت پی وی لرن . با آموزش css_buttons در خدمتتون هستیم. در این قسمت از آموزش به استفاده از Social Buttons در Css Button و کتابخانه Social Buttons در CSS Buttons خواهیم پرداخت.
استفاده از Social Buttons در Css Buttons
کتابخانه Social Buttons مجموعه ای از CSS Buttons ساخته شده در CSS خالص است و بر اساس Bootstrap و Font Awesome است.
بارگذاری Social Buttons
برای بارگذاری کتابخانه bootstrap-social.css ،دانلود کنید bootstrap-social.css را از github و خط زیر را در قسمت <head> صفحه وب قرار دهید.
مثال :
| <head> <link rel = "stylesheet" href = "bootstrap-social.css"> </head> |
استفاده از Button
یک دکمه با استفاده از html anchor tag ایجاد کنید و سبک btn، btn-block را با btn-social مشخص کنید.
مثال :
| <html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css"> </head> <body> <a class = "btn btn-block btn-social btn-twitter"> <span class = "fa fa-twitter"></span> Login with Twitter </a> </body> </html> |
خروجی زیر را تولید می کند.
تعریف Size
شما می توانید اندازه یک دکمه را با تعیین اندازه آن با استفاده از CSS و استفاده از آن با نام کلاس، افزایش دهید یا کاهش دهید، همانطور که در زیر نشان داده شده است. در مثال داده شده، ما تغییرات چهار اندازه را داریم.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css"> </head> <body> <a class = "btn btn-block btn-lg btn-social btn-twitter"> <span class = "fa fa-twitter"></span> Login with Twitter </a> <a class = "btn btn-block btn-md btn-social btn-twitter"> <span class = "fa fa-twitter"></span> Login with Twitter </a> <a class = "btn btn-block btn-sm btn-social btn-twitter"> <span class = "fa fa-twitter"></span> Login with Twitter </a> <a class = "btn btn-block btn-xs btn-social btn-twitter"> <span class = "fa fa-twitter"></span> Login with Twitter </a> </body> </html> |
خروجی زیر را تولید می کند.
فقط استفاده از Icons
مثال زیر نشان می دهد که چگونه فقط دکمه های آیکون را انتخاب کنید.
مثال :
| <html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel = "stylesheet" href = "bootstrap-social.css"> </head> <body> <a class = "btn btn-social-icon btn-twitter"> <span class = "fa fa-twitter"></span> </a> </body> </html> |
خروجی زیر را تولید می کند.
کلام پایانی
با آموزش css_buttons در خدمتتون هستیم. در این قسمت از آموزش به استفاده از Social Buttons در Css Button و کتابخانه Social Buttons در CSS Buttons پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
