ساخت دکمه ی سه بعدی با html و css

- visibility ٢ mode_comment

با سلام و درود خدمت همه ی شما کاربرای عزیز سون لرن امروز با یک ابزار جدید برای زیبا سازی وبلاگ و وبسایتتون اومدیم.این آموزش ساخت دکمه های زیبای سه بعدی به کمک html و css را پوشش می دهد.

حتما شما هم شاهد دکمه های سه بعدی زیادی در دنیای وب بوده اید که واقعا جلوه ی یک سایت رو بسیار دلنشین می کنند و بدون اشغال حجم زیادی می توانند جایگزین مناسبی برای تصاویر انیمیشنی چه swf و چه gif شوند.همچنین برخی از سایت ها و وبلاگ ها می تواندد متاباکس های حرفه ای را به کمک این کدها ایجاد کنند.مثلا سایت های فروش قالب یا دانلود سنتر ها برای دکمه ی خرید و یا دمو و  دانلود از این استایل ها استفاده کنند.قبل از شروع بهتون پیشنهاد می کنم تا دموی نهایی کار رو در انتهای مطلب ببینید.

خب ، برای شروع باید از کد css زیر استفاده کنید:

 

 

info نکته :

اگه از سامانه های مدیریت محتوا نظیر وردپرس و جوملا استفاده می کنید باید این کد را در فایل style.css اضافه کرده و ذخیره کنید. و اگر از سایر سیستم ها به فایل اصلی css خودتون اضافه کنید.

استفاده از این دکمه ها در صفحات وب :

در مرحله ی بعد باید این کدها رو در html و یا php فراخوانی کنید. که باید با توجه به رنگ دلخواه تنها از 4 کلاس css زیر استفاده کنید :

استفاده از دکمه قرمز:

 

استفاده از دکمه آبی:

 

استفاده از دکمه سبز:

 

استفاده از دکمه زرد:

 

 

در نهایت باید به جای لینک 7learn.com آدرس صفحه ی خودتون رو و بجای 7learn متن مورد نظر خودتون رو وارد کنید.

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

خوبه

ممنون. مطلب مفیدی بود …

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.