+ پاسخ به مبحث
نمایش نتایج 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

دكمه متحرك

دکمه سازی

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

کد دکمه متحرک

دکمه های متحرک cssدکمه وآیکن متحرکكد css3کدهای متحرک cssکد دکمه متحرک لینک در htmlتصاویر متحرک با css3متحرک کردن بوردر درhtmlمتحرک کردن تصویر با css3آیکون متحرک css3متحرک کردن آیکن در html در hoverکد html دکمه متحرک انیمیشندکمه متحرک htmlدکمه متحرک در htmlکد محرک کردن در cssدکمه متحرک css با عکسدکمه متحرک برای سیمبیانcss3 و متحرك سازيمتحرك سازي با css3متحرک سازی با 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