آموزش ساخت دکمه های متنی زیبا توسط CSS

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



تکنیک درب های کشویی

از آنجا که دکمه ها باید انعطاف پذیر باشند ، باید کاری کنیم که سایز دکمه ها با توجه به سایز متن داخل آن تغییر کند تا متن از کادر بیرون نرود و یا شکسته نشود . همچنین تصویر پس زمینه درست به اندازه متن کشیده شود . برای اینکار ما از تکنیک درب های کشویی استفاده میکنیم . در این تکنیک دو تصویر که مکمل یکدیگر هستند ، یک تصویر واحد را در کنار هم به بیننده القا می کنند که یکی از این تصاویر ثابت و دیگری بسته به سایز متن درون دکمه کشیده می شود و در هر لحظه اضافات عکسی که کشیده میشود ، مخفی می شود . این دکمه ها بر پایه تگ a که داخل آن یک تگ span استفاده شده است ، پیاده سازی میشوند . هر کدام از این دو عنصر حاوی یک تکه از دو تصویر مکمل هستند . به صورت زیر :

<a class="button" href="#" ><span>Bring world peace</span></a>

تا اینجا همه چیز عادی است . درسته ؟ خوب ، حالا می خواهیم امکان تغییر ظـاهر دکمه در حالتی که با کلیک ماوس فشرده میشود و در حالت عادی را پیاده کنیم . به اینصورت :

ساخت دکمه با css


می خواهیم هر دو حالت را با یک تصویر واحد انجام دهیم . برای این تعویض حالت ، ما به سادگی هنگام فشرده شدن دکمه ، پس زمینه را در محور عمودی تغییر مکان می دهیم . این روش مبتنی بر CSS به ما امکان میدهد بدون استفاده از هیچ حقه و کد جاوااسکریپت ، بین دو تصویر براحتی سوئـیچ کنیم . حالا این روش را با تکنیک درب کشویی ادغام میکنیم تا دکمه ما کامل شود . تصویری که قرار است زیر متن دکمه قرار گیرد را با عرض 300 پیکسل و ارتفاع 24 پیکسل طراحی مکنیم .



استایل دکمه ها

در پایان به مقداری کد css برای طراحی دکمه ها نیاز داریم . برای قرار دادن دکمه ها در یک خط خصیصه float را با left یا right مقداردهی می کنیم . با اینکار می توانیم چند ردیف دکمه را کنار هم قرار دهیم .


.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 

نکته : دقت کنید که مقدار padding عمودی 5+5=10 و مقدار line-height برابر با 14 می باشد که مجموعا" ارتفاع دکمه می شود 24 . بنابراین استفاده از مقادیر دیگری برای padding به معنی تغییر ارتفاع دکمه می باشد .
خوب ، ظاهر دکمه ها طراحی و پیاده سازی شد ، اما برای داشتن افکت های بصری بیشتر به چند خط کد CSS دیگر نیاز داریم ، بنابراین آخرین دستکاری را با اضافه کردن کد زیر انجام میدهیم :

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}


کار تمام شد ، می توانید روی آنها کلیک کنید !



یک کار اضافی برای مرورگر اینترنت اکسپلورر

در مرورگر IE دکمه ممکن است به حالت عادی بر نگردد ، برای رفع این مشکل کافیست یک تکه کد جاوااسکریپت کوچک به تگ <a> اضافه کنید :

<a class="button" href="#" onclick="this.blur();"> … </a>

برای استفاده از این دکمه در صفحات داینامیک کافیست رویداد مورد نظر خود را به onclick اضافه کنید .


دانلود کد منبع کامل(6.67kb)
پسورد فایل زیپ : www.websiteha.com

نظرات (12) -

  • Xcalibore

    02/26/1390 11:34:57 ب.ظ | پاسخ به این نظر

    مطالب این سایت فوق العاده است و مشخصه شما واقعا وقت صرف تهیه و نوشتن آنها نموده اید
    امیدوارم همواره م.فق و سر بلند باشید :>

  • Admin

    02/27/1390 01:06:14 ب.ظ | پاسخ به این نظر

    از لطف شما بسیار سپاسگذارم دوست عزیز و خوشحالم که مطالب مورد توجه شما واقع شده و در نهایت باعث آشنایی با شما شده ...

  • محمد رضا

    07/19/1390 05:42:25 ق.ظ | پاسخ به این نظر

    سلام

    بسیا عالی بود عزیز
    ازین که همچین کار زیبایی انجام دادی و اطاعاتتو به همه انتقال میدی ازت تشکر میکنم

    • Admin

      07/19/1390 06:29:14 ق.ظ | پاسخ به این نظر

      این نظر لطف شماست محمدرضا جان، از اینکه آموزش رو مطالعه کردید ممنونم، امیدوارم استفاده کافی برده باشید. به نظر من اگر داشته هامون رو به دیگران انتقال بدیم، راه برای آموزه های جدید در خودما باز خواهد شد.

  • محمدامین

    11/01/1390 02:30:44 ب.ظ | پاسخ به این نظر

    سلام مرررررررررررسی.با یه روز تاخیر اومدم اخه امروز امتحان زبان داشتم.ممنون منتظر چک و رادیویی هم هستیما! من باید یه برنامه بریزم تموم پستای این سایت رو بخونم!!!
    مرسی ممنون

  • امین

    11/01/1390 10:39:07 ب.ظ | پاسخ به این نظر

    سلام خیلی عالی بود اما من یه باهاش یه مشکل دارم اگه میشه راهنماییم کنید.

    من میخ می خوام چند تا از این دکمه ها را در کنار هم بذارم اما به طور نامنظم نشون میده باید چه کن؟

    مرسی.می تونید به وبم برید و مشکلم ار هم ببینید.

  • maryam

    02/06/1391 04:27:17 ب.ظ | پاسخ به این نظر

    سلام خسته نباشییید
    مطالب واقعا عالی و کامل هست
    مرسی از زحماتتون

  • Mostafa

    03/30/1391 02:25:15 ب.ظ | پاسخ به این نظر

    با سلام و خسته نباشید آقا من خیلی به سختی توی یه سایت نظر میزارم ولی اینقدر مطالب سایت شما مفیده که آدم میخواد به جای یخ نظر دوتا نظر بزاره موفق باشید

Loading