سلام خدمت دوستان و همراهان عزیز سایت پی وی لرن . با آموزش css_buttons در خدمتتون هستیم. در ادامه مباحث کتاب خانه ها در CSS Button به بررسی کتابخانه Pushy ButtonsدرCSS Button و استفاده از Pushy Buttons در CSS Buttons می پردازیم.
کتابخانه Pushy Buttons یک کتابخانه کوچک CSS Pressable Buttons است.
برای بارگذاری کتابخانه pushy-buttons.min.css، دانلود کنید CSS را از github و خط زیر را در قسمت <head> صفحه وب قرار دهید.
1 2 3 | <head> <link rel = "stylesheet" href = "pushy-buttons.min.css"> </head> |
یک دکمه با استفاده از تگ دکمه HTML ایجاد کنید و سبک های btn، btn-blue را با اندازه مشخص btn-lg اضافه کنید.
1 2 3 4 5 6 7 8 9 | <html> <head> <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css"> </head> <body> <button class = "btn btn--blue">Submit</button> </body> </html> |
خروجی زیر را تولید می کند.
شما می توانید اندازه یک دکمه را با تعیین اندازه آن با استفاده از CSS و استفاده از آن با نام کلاس، افزایش دهید یا کاهش دهید، همانطور که در زیر نشان داده شده است. در مثال داده شده، ما تغییرات چهار اندازه را داریم.
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css"> </head> <body> <button class = "btn btn--lg btn--blue">Large</button> <button class = "btn btn--df btn--blue">Normal</button> <button class = "btn btn--md btn--blue">Medium</button> <button class = "btn btn--sm btn--blue">Small</button> </body> </html> |
خروجی زیر را تولید می کند.
درست مثل اندازه، شما می توانید رنگ دکمه را با استفاده از CSS تعریف کنید. مثال زیر نشان می دهد که چگونه رنگ دکمه را تغییر دهید.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css"> </head> <body> <button class = "btn btn--lg btn--red">Large</button> <button class = "btn btn--df btn--green">Normal</button> <button class = "btn btn--md btn--blue">Medium</button> </body> </html> |
خروجی زیر را تولید می کند.
در ادامه مباحث کتاب خانه ها در CSS Button به بررسی کتابخانه Pushy ButtonsدرCSS Button و استفاده از Pushy Buttons در CSS Buttons پرداختیم.