/ ساخت یک دکمه با سی اس اس (اختصاصی ویکی ویبی)
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
نمایش نتایج: از 1 به 5 از 5

مقاله: ساخت یک دکمه با سی اس اس (اختصاصی ویکی ویبی)

    1. ساخت یک دکمه با سی اس اس (اختصاصی ویکی ویبی)

      ساخت یک دکمه با سی اس اس (اختصاصی ویکی ویبی)

      سلام
      توی این آموزش میخواهیم یک دکمه زیبا طراحی کنیم
      اول توی کد های اچ تی ام ال اینو مینویسیم
      کد:
      <button class="amir">
      WikiVb&#10004
      </button>
      ولی اگه اینجور بنویسید بهتره که توهم توهم نشه
      کد:
      &nbsp;&nbsp;WikiVb&#10004&nbsp;&nbsp;
      WikiVb&#10004 یعنی wikivb و یک چک مارک (تیک)بقلش

      که اون میشه متن شما باشه مثلا دانلودمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


      خب بریم سراغ اصل کار
      اول یه نکته رو بگم:میتونید با سی اس اس بک گراند کل صفحه اچ تی ام ال رو تغییر بدید
      چجوری؟؟
      اینجوری
      کد:
      body {
          background:black;
      }
      یه کلس ایجاد کنید و یک بک گراند بهش بدید
      من یک بک گراند خاکستری میدم button برای اولش فراموش نشه چون یک دکمست
      کد:
      button.Wikivb {
          background: #444;
      خب حالا فونتش رو درست کنیم که راحت باشیم
      کد ها مشخصه بویلد باشه با اندازه 40 و فونت اریال
      کد:
          font: bold 40px arial;
      خب حالا برای مشخص تر شدنش بهش یه نواری برای دورش میدیم
      کد ها دیگه خیلی مشخصه !!!!
      کد:
             border: 4px solid #ee08f6;
      حالا نکته مهم
      ::
      برای راحتی کار از یک کد آماده استفاده میکنیم
      http://css-tricks.com/examples/ShapesOfCSS/
      اینجا یسری شکل هستند
      border-radius اون کار داریم
      الان من اینو درست کردم
      (یه چیزی شبیه لیمو هستش)
      توضیح نمیخواد چون بالا گفتم که چیکار کنید
      کد:
             border-radius: 10px 150px 30px 150px;
      تموم شد تقریبا
      اما الان افکتی نداره
      پس این خاصیت ها رو بهش می دیم :
      (این خاصیت انیمیشن هست بر 2 ثانیه هم تنظیم کردیم )
      کد:
      
      -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in;
      خب حالا هاور و وقتی که کلیک میشه روش:
      سریع یک کلس هاور ایجاد کنید و یک رنگ براش تعیین کنید
      (قرمز)

      کد:
      button.Wikivb:hover{
          color: #ff0000;
             
      }
      و یه کلس دیگه برای وقتی که کلیک میشه
      و یه رنگ دیگه بدید
      و همون چیزی که توی کدی که در بالا یک لینک براش دادم رو بر عکس بنویسید

      کد:
      button.Wikivb:active {
          color: #0ab;
                                border-radius: 150px 30px 150px 10px;
                               
            }
      خب الان فرق رو ببینید
      border-radius: 10px 150px 30px 150px;
      border-radius: 150px 30px 150px 10px;


      کد کامل:
      کد:
      body {
          background:black;
      }
      button.Wikivb {
      background: #444;
      font: bold 40px arial;
      border: 4px solid #ee08f6;
      border-radius: 10px 150px 30px 150px;
      -moz-transition: all 0.2s ease-in;
      -webkit-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      -ms-transition: all 0.2s ease-in;      
      }
      button.Wikivb:hover{
      color: #ff0000;   
      }
      button.Wikivb:active {
      color: #0ab;
       border-radius: 150px 30px 150px 10px;                         
      }
      موفق باشیدمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      - - - Updated - - -

      برای پیش نمایش در این لینک این رو کپی کنید
      http://www.wikivb.ir/editor.html

      کد:
      <head>
      <style type="text/css">
      body {
          background:black;
      }
      button.Wikivb {
      background: #444;
      font: bold 40px arial;
      border: 4px solid #ee08f6;
      border-radius: 10px 150px 30px 150px;
      -moz-transition: all 0.2s ease-in;
      -webkit-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      -ms-transition: all 0.2s ease-in;      
      }
      button.Wikivb:hover{
      color: #ff0000;   
      }
      button.Wikivb:active {
      color: #0ab;
       border-radius: 150px 30px 150px 10px;                         
      }
      </style>
      </head>
      <body>
      <button class="Wikivb" >
      &nbsp;&nbsp;WikiVb&#10004&nbsp;&nbsp;
      </button>
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

      4 نفر از اعضا پست C.I.A را پسندیده اند


  1. #2
    C.I.A آنلاین نیست.
    C.I.A
    کاربر سايت
    393نوشته207مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    2035
    پسندیده است
    197 پست
    بلاگ
    2 پست
    میزان امتیاز
    217
    holoo-f.ir
    آپ
    که دوستانی که ندیدند ببینندمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. #3
    ALIREZA_2010 آنلاین نیست.
    ALIREZA_2010
    مدير ارشد
    1,759نوشته3,525مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2280
    پسندیده است
    1,986 پست
    بلاگ
    پست
    میزان امتیاز
    3533
    مسئول 2 ستاره
    No Set
    بی جهت آپ نکنید عزیز. مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست ALIREZA_2010 را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی افرادی که برای حل مشکلاتشان به بنده پیام عمومی و پیام خصوصی بدهند، از جانب بنده پشتیبانی نخواهند شد مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی



  3. #4
    C.I.A آنلاین نیست.
    C.I.A
    کاربر سايت
    393نوشته207مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    2035
    پسندیده است
    197 پست
    بلاگ
    2 پست
    میزان امتیاز
    217
    holoo-f.ir
    نقل قول نوشته اصلی توسط ALIREZA_2010 نمایش پست ها
    بی جهت آپ نکنید عزیز. مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    بی جهت بود؟؟؟؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    خوب نیست چند نفر دیگه هم از این آموزش استفاده کنند؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #5
    ALIREZA_2010 آنلاین نیست.
    ALIREZA_2010
    مدير ارشد
    1,759نوشته3,525مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2280
    پسندیده است
    1,986 پست
    بلاگ
    پست
    میزان امتیاز
    3533
    مسئول 2 ستاره
    No Set
    نقل قول نوشته اصلی توسط امیر نمایش پست ها
    بی جهت بود؟؟؟؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    خوب نیست چند نفر دیگه هم از این آموزش استفاده کنند؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    بله عزیز.

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


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی



اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی