دکمه های بسیار زیبا با CSS3 و HTML

صدها و هزاران طرح برای دکمه های بسیار زیبای کدنویسی شده با CSS3 در سطح وب وجود دارد؛ در این آموزش می توانید یکی از بهترین و در عین حال خاص ترین نمونه ها را ببینید، دانلود کنید و در سایت خود استفاده نمایید. توصیه می کنیم این آموزش را از دست ندهید.

1کدهای HTML

بخش HTML این آموزش، نیاز به توضیحات خاصی ندارد. فقط 4 عنصر span به عنوان 4 دکمه خود اضافه می کنیم و کلاس های CSS را تعریف می کنیم.

در این مرحله در صورتی که فایل را با فرمت html ذخیره و اجرا کنید، فقط صفحه سفید می بینید. جای نگرانی نیست، چون چیزی برای نمایش وجود ندارد.

2کدهای CSS

قبل از شروع استایل دهی دکمه ها، بدنه یا زمینه صفحه را استایل دهی می کنیم تا این دکمه های بسیار زیبا نمایش بهتری داشته باشند:

برای استایل دهی دکمه ها با توجه به اینکه هر 4 دکمه ما، عرض، ارتفاع، حاشیه و … یکسانی دارند، می توانیم به جای نوشتن همه این مشخصات برای تک تک دکمه ها، از کلاس CSS مشترکی برای هر دو استفاده کنیم؛ همانطور که در کد HTML می توانید ببینید، ما از کلاس btn برای هر 4 دکمه استفاده کردیم و به شکل زیر استایل دهی این کلاس را انجام می دهیم:

حالا نوبت استایل اختصاصی تک تک دکمه هاست، با دکمه آبی شروع می کنیم که در کد HTML با کلاس blue تعریف کرده ایم:

دکمه قرمز:

دکمه سبز:

و در نهایت دکمه زرد:

امیدوارم این آموزش برای شما مفید بوده باشه؛ می تونید فایل مربوط رو از اینجا دانلود کنید.

منبع

یک دیدگاه

  1. واقعا حال کردم نميدونم چي بگم سايتتون واقعا بي نقصه

سوال یا دیدگاه شما