۱۹
خرداد

جلسه ۰۶ : آموزش طراحی دکمه ها در Pure CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در جلسه گذشته یاد گرفتیم که چگونه می توان در Pure CSS به طراحی فرم های زیبا و ریسپانسیو پرداخت و چنین فرم هایی را با کمک کلاس های موجود در Pure CSS ایجاد نمود. برخی از این کلاس های عبارت بودند از : pure-form : که یک فرم داخل خط را فشرده نشان می دهد؛ pure-form-stacked که یک stacked form را با عناصر ورودی زیر بر چسب ها را نشان می دهد؛ pure-form-aligned : که یک فرم aligned form را با عناصر زیر برچسب ها را به نمایش می گذارد و … در این جلسه و در ادامه این دوره آموزش طراحی دکمه ها در Pure CSS را به علاقمندان این دوره ارائه می نماییم.

آموزش طراحی دکمه ها در Pure CSS

در Pure CSS می توان CSS هایی را یافت که به کمک آن ها می توان دکمه ها را سفارشی سازی کرد و دکمه هایی زیبا که خاصیت ریسپانسیو بالایی دارند ساخت.
در ادامه لیستی به شما معرفی می شود که به کمک آن می توان چنین دکمه هایی را ایجاد نمود.

شماره کلاس	کلاس و توضیحات آن
۱	pure-button این کلاس استانداردهایی را برای ایجاد دکمه ها در نظر می گیرد که می تواند برای استایل یک لینک و دکمه به کار برده شود.
۲	pure-button-disabled از این کلاس برای نمایش یک دکمه به صورت غیر فعال استفاده می شود تا به بتوان آن را در کنار pure-button به کار برد.
۳	pure-button-active از این کلاس برای نشان دادن یک دکمه در حال فشردن استفاده می شود تا به بتوان آن را در کنار pure-button به کار برد.

مثال

purecss_buttons.htm

مثال :

<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>

<html>

<head>

<title>The PURE.CSS Forms</title>

<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 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 همراه شما بودیم.
در جلسه بعدی می آموزیم که چگونه به کمک Pure CSS به طراحی جداول بپردازیم.
با پی وی لرن همراه باشید.

QR: جلسه ۰۶ : آموزش طراحی دکمه ها در Pure CSS

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۶ : آموزش طراحی دکمه ها در Pure CSS

مقدمه

آموزش طراحی دکمه ها در Pure CSS

مثال

نتیجه

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ