سلام خدمت دوستان و همراهان عزیز سایت پی وی لرن . با آموزش css_buttons در خدمتتون هستیم. در آخرین بخش این مجموعه آموزشی به استفاده از Beautons در Css Buttons و بارگیری Beautons در CSS Buttons خواهیم پرداخت.
کتابخانه Beautons buttons یک ابزار ساده CSS برای ایجاد دکمه است. این اجازه می دهد تا ترکیبی از سبک ها، ابعاد برای ایجاد یک مجموعه عظیم از دکمه های سازگار، قوی و جامد استفاده کنید.
برای بارگیری Beautons library، دانلود کنید CSS را از github و خط زیر را در قسمت <head> صفحه وب قرار دهید.
1 2 3 | <head> <link rel = "stylesheet" href = "beauton.min.css"> </head> |
با استفاده از Button
یک Button با استفاده از تگ دکمه HTML ایجاد کنید و سبک btn را اضافه کنید.
1 2 3 4 5 6 7 8 9 | <html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn"<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/beauton.min.css"> </head> <body> <button class = "btn btn--small">Small</button> <br/> <br/> <button class = "btn btn--large btn-blue">Large</button><br/><br/> <button class = "btn btn--huge">Huge</button><br/><br/> <button class = "btn btn--full">Full</button><br/><br/> </body> </html> |
خروجی زیر را تولید می کند.
شما می توانید اندازه یک دکمه را با تعیین اندازه آن با استفاده از CSS و استفاده از آن با نام کلاس، افزایش دهید یا کاهش دهید، همانطور که در زیر نشان داده شده است. در مثال داده شده، ما چهار اندازه را تغییر داده ایم.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn btn--alpha">Huge</button><br/><br/> <button class = "btn btn--beta">Large</button><br/><br/> <button class = "btn btn--gamma">Regular</button><br/><br/> </body> </html> |
خروجی زیر را تولید می کند.
مثال زیر دکمه های عملکردی مختلفی را نشان می دهد.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn btn--positive">Positive</button> <br/> <br/> <button class = "btn btn--negative">Negative</button><br/><br/> <button class = "btn btn--inactive">Disabled</button><br/><br/> <button class = "btn btn--soft">Rounded</button><br/><br/> <button class = "btn btn--hard">Hard</button><br/><br/> </body> </html> |
خروجی زیر را تولید می کند.
مثال زیر نشان می دهد که چگونه سبک های دکمه ها را ترکیب کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn btn--large btn--positive">Button</button> <br/><br/> <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/> <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/> <p>A <button class = "btn btn--natural">button</button> in a paragraph.</p><br/><br/> </body> </html> |
خروجی زیر را تولید می کند.
در آخرین بخش این مجموعه آموزشی به استفاده از Beautons در Css Buttons و بارگیری Beautons در CSS Buttons خواهیم پرداخت. از این که همراه ما بودید متشکریم. موفق باشید.