با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در جلسه گذشته یاد گرفتیم که چگونه می توان در Pure CSS به طراحی فرم های زیبا و ریسپانسیو پرداخت و چنین فرم هایی را با کمک کلاس های موجود در Pure CSS ایجاد نمود. برخی از این کلاس های عبارت بودند از : pure-form : که یک فرم داخل خط را فشرده نشان می دهد؛ pure-form-stacked که یک stacked form را با عناصر ورودی زیر بر چسب ها را نشان می دهد؛ pure-form-aligned : که یک فرم aligned form را با عناصر زیر برچسب ها را به نمایش می گذارد و … در این جلسه و در ادامه این دوره آموزش طراحی دکمه ها در Pure CSS را به علاقمندان این دوره ارائه می نماییم.
در Pure CSS می توان CSS هایی را یافت که به کمک آن ها می توان دکمه ها را سفارشی سازی کرد و دکمه هایی زیبا که خاصیت ریسپانسیو بالایی دارند ساخت.
در ادامه لیستی به شما معرفی می شود که به کمک آن می توان چنین دکمه هایی را ایجاد نمود.
شماره کلاس | کلاس و توضیحات آن |
۱ | pure-button این کلاس استانداردهایی را برای ایجاد دکمه ها در نظر می گیرد که می تواند برای استایل یک لینک و دکمه به کار برده شود. |
۲ | pure-button-disabled از این کلاس برای نمایش یک دکمه به صورت غیر فعال استفاده می شود تا به بتوان آن را در کنار pure-button به کار برد. |
۳ | pure-button-active از این کلاس برای نشان دادن یک دکمه در حال فشردن استفاده می شود تا به بتوان آن را در کنار pure-button به کار برد. |
purecss_buttons.htm
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <html> <head> <title>The PURE.CSS Forms</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css"> <style> .success, .error, .warning, .secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .success { background: rgb(28, 184, 65); /* green */ } .error { background: rgb(202, 60, 60); /* maroon */ } .warning { background: rgb(223, 117, 20); /* orange */ } .secondary { background: rgb(66, 184, 221); /* light blue */ } .xsmall { font-size: 70%; } .small { font-size: 85%; } .large { font-size: 110%; } .xlarge { font-size: 125%; } </style> </head> <body> <h2>Standard Buttons</h2> <button class = "pure-button">Click Me</button> <button class = "pure-button pure-button-active">Click Me</button> <button class = "pure-button pure-button-disabled">I am disabled</button> <h2>Links as Buttons</h2> <a class = "pure-button">Link</a> <a class = "pure-button pure-button-active">Link</a> <a class = "pure-button pure-button-disabled">Disabled Link</a> <h2>Primary Button</h2> <a class = "pure-button pure-button-primary">Submit</a> <h2>Customized button</h2> <button class = "pure-button success">Success</button> <button class = "pure-button error">Error</button> <button class = "pure-button warning">Warning</button> <button class = "pure-button secondary">Secondary</button> <h2>Different Sized button</h2> <button class = "pure-button xsmall">Extra Small</button> <button class = "pure-button small">Small</button> <button class = "pure-button large">Large</button> <button class = "pure-button xlarge">Extra Large</button> </body> </html> |
نتیجه را تأیید کنید.
نتیجه به صورت تصویر زیر آشکار خواهد شد.
در این جلسه با آموزش طراحی دکمه ها در Pure CSS همراه شما بودیم.
در جلسه بعدی می آموزیم که چگونه به کمک Pure CSS به طراحی جداول بپردازیم.
با پی وی لرن همراه باشید.