+ پاسخ به مبحث
نمایش نتایج 1 تا 1 از 1

مبحث: متحرک سازی دکمه با css3

  1. #1
    338 امتیاز ، سطح 3
    88% کامل شده  امتیاز لازم برای سطع بعدی 12
    0% فعالیت
    دستاورد ها:
    3 months registered250 Experience Points

    تاريخ عضويت
    Jun 2012
    پست
    1
    گيپا
    1,873
    پس انداز
    0
    امتیاز
    338
    سطح
    3
    تشكرها
    0
    1 بار در 1 پست از اين كاربر تشكر شده


    به نظر شما این پست مفید است؟ بله | خیر

    پیش فرض متحرک سازی دکمه با css3

    آگهی تبلیغات (برای حمایت از گیگاپارس)
    قابلیت های CSS3 هر روز گسترده تر می شود

    در این آموزش شما را با متحرک سازی دکمه توسط CSS3 آشنا می کنم

    توجه داشته باشید که این قابلیت فقط در مرورگرهایی که از [تنها کاربرانی که عضو شده اند و از طریق ایمیل عضویتشان فعال شده می تواند این لینک را ببینند. ]3 پشتبانی می کنند قابل استفاده می باشد.


    [تنها کاربرانی که عضو شده اند و از طریق ایمیل عضویتشان فعال شده می تواند این لینک را ببینند. ]



    گام اول : ساختار HTML

    ساختار HTML بسیار ساده می باشد . توجه کنید که همه عناصر داخل تگ span باشند



    کد HTML:
         
    <a href="#" class="a-btn">   
                          <span class="a-btn-slide-text"> 20R</span>    
                         <img src="http://forum.gigapars.com/images/icons/1.png" alt="Photos" />    
                         <span class="a-btn-text"><small>Idehdesign</small>Download</span>             
                <span class="a-btn-icon-right"><span></span></span    </a> 
    گام دوم : ساختار CSS

    کد:
    .a-btn{ background: linear-gradient(top, #a9db80 0%,#96c56f 100%); padding-left: 90px; padding-right: 105px; height: 90px; display: inline-block; position: relative; border: 1px solid #80ab5d; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); border-radius: 4px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: box-shadow 0.3s ease-in-out; } .a-btn img { position: absolute; left: 15px; top: 13px; border: none; transition: all 0.3s ease-in-out; } .a-btn .a-btn-slide-text{ position: absolute; font-size: 36px; top: 18px; left: 18px; color: #6d954e; opacity: 0; text-shadow: 0px 1px 1px rgba(255,255,255,0.4); transition: opacity 0.2s ease-in-out; } .a-btn-text{ padding-top: 13px; display: block; font-size: 30px; text-shadow: 0px -1px 1px #80ab5d; } .a-btn-text small{ display: block; font-size: 11px; letter-spacing: 1px; } .a-btn-icon-right{ position: absolute; right: 0px; top: 0px; height: 100%; width: 80px; border-left: 1px solid #80ab5d; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width: 38px; height: 38px; opacity: 0.7; border-radius: 20px; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; border: 1px solid rgba(0,0,0,0.5); background: #4e5c50 url(../images/arrow_down.png) no-repeat center center; box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); transition: all 0.3s ease-in-out; }
    در حالت Hover
    کد:
    .a-btn:hover{ box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover img{ transform: scale(10); opacity: 0; } .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span{ opacity: 1; }
    در حالت Active

    کد:
    .a-btn:active { position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #a9db80; } .a-btn:active .a-btn-icon-right span{ transform: scale(1.4); }

  2. کاربرانی که برای این مطلب مفید از codeplus تشکر کرده اند:


+ پاسخ به مبحث

بازدید کنندگانی که از طریق جستجو کلمات ذیل به انجمنهای گیگاپارس آمده اند:

متحرک سازی در css

دكمه متحرك

دکمه سازی

دکمه متحرک

کد دکمه متحرک

کد متحرک سازی ایکون

css3 و متحرك سازي

تصویر دکمه متحرک جستجو

طریقه button سازی متحرک

تصاویر متحرک با css3

کد دکمه متحرک لینک در html

کدهای متحرک css

كد css3

دکمه متحرک در html

کد محرک کردن در css

دکمه وآیکن متحرک

دکمه متحرک css با عکس

دکمه متحرک برای سیمبیان

متحرک کردن بوردر درhtml

متحرک کردن تصویر با css3

آیکون متحرک css3

متحرک سازی با css

متحرك سازي با css3

دکمه های متحرک css

دکمه متحرک در css

SEO Blog

اطلاعات این مبحث

Users Browsing this Thread

در حال حاضر 1 کاربر در حال دیدن این مبحث می باشند، (0کاربر عضو و 1 کاربر مهمان)

قانون های ارسال نوشته

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts