CSS3 بوتون تحوم تأثيرات كولاكتيون
1- انتقل إلى لوحة تحكم بلوجر> القالب2. ابحث عن]]> </ b: سكين>
3. قم بلصق الرمز أدناه أسفله مباشرة.
/ * == زر تحوم كس == * /
بوتون {بوردر: 0؛ فونت-فاميلي: "أوبين سانس"؛ فونت-ويت: 600؛ بادينغ: 8px 12px؛ ويدث: 120px؛ كولور: #fff؛ بوردر-راديوس: 5px؛ باكغروند-كولور: # DB733B؛ المؤشر: مؤشر؛ بوسيتيون: ريلاتيف؛ z-إندكس: 1؛}
.b1: قبل {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b1: هوفر: بيفور {هيت: 100٪؛ أسفل: السيارات؛ توب: 0؛}
.b2: قبل {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b2: هوفر: بيفور {هيت: 100٪؛ توب: أوتو؛ بوتوم: 0؛}
.b3: بيفور {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b3: هوفر: بيفور {ويدث: 100٪؛ رايت: أوتو؛ ليفت: 0؛}
.b4: قبل {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b4: هوفر: بيفور {ويدث: 100٪؛ ليفت: أوتو؛ رايت: 0؛}
.b5: قبل {كونتنت: ""؛ ويدث: 0؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b5: هوفر: بيفور {ويدث: 100٪؛ ارتفاع: 100٪؛ رايت: أوتو؛ ليفت: 0؛ أسفل: السيارات؛ توب: 0؛}
.b6: قبل {كونتنت: ""؛ ويدث: 0؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b6: هوفر: بيفور {ويدث: 100٪؛ ارتفاع: 100٪؛ ليفت: أوتو؛ رايت: 0؛ توب: أوتو؛ بوتوم: 0؛}
.b7: قبل {كونتنت: ""؛ ويدث: 0؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ اليسار: 50٪؛ أسفل: 50٪؛ الانتقال: .4s. z-إندكس: -1؛}
.b7: هوفر: بيفور {ويدث: 100٪؛ ارتفاع: 100٪؛ ليفت: 0؛ بوتوم: 0؛}
.b8: قبل {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b8: أفتر {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b8: هوفر: بيفور، .b8: هوفر: أفتر {ويدث: 50٪؛}
.b9: قبل {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ اليسار: 50٪؛ توب: 0؛ الانتقال: .3s. z-إندكس: -1؛}
.b9: أفتر {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 50٪؛ توب: 0؛ الانتقال: .3s. z-إندكس: -1؛}
.b9: هوفر: بيفور، .b9: هوفر: أفتر {ويدث: 50٪؛}
.b9: هوفر: قبل {ليفت: 0؛}
.b9: هوفر: أفتر {رايت: 0؛}
.b10: قبل {كونتنت: ""؛ ويدث: 0؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b10: أفتر {كونتنت: ""؛ ويدث: 0؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b10: هوفر: بيفور، .b10: هوفر: أفتر {ويدث: 50٪؛ الارتفاع: 100٪؛}
.b11: قبل {كونتنت: ""؛ ويدث: 0؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b11: أفتر {كونتنت: ""؛ ويدث: 0؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b11: هوفر: بيفور، .b11: هوفر: أفتر {ويدث: 50٪؛ الارتفاع: 100٪؛}
.b12: قبل {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b12: أفتر {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.b12: هوفر: بيفور، .b12: هوفر: أفتر {هيت: 50٪؛}
.b13: قبل {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ أسفل: 50٪؛ الانتقال: .3s. z-إندكس: -1؛}
.b13: أفتر {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ توب: 50٪؛ الانتقال: .3s. z-إندكس: -1؛}
.b13: هوفر: بيفور، .b13: هوفر: أفتر {هيت: 50٪؛}
.b13: هوفر: قبل {بوتوم: 0؛}
.b13: هوفر: أفتر {توب: 0؛}
/ * = زر تحوم مع النص = * /
.withText بوتون {هيت: 39px؛ إخفاء الفائض؛}
بوتون سبان {ديسبلاي: بلوك؛ بوسيتيون: ريلاتيف؛ الانتقال: .35s؛}
.bt1 .after {توب: -45px؛}
.bt1. قبل {توب: 0؛}
.bt1: هوفر. قبل {توب: 45px؛}
.bt1: هوفر .after {توب: -18px؛}
.bt1: بيفور {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.bt1: هوفر: بيفور {هيت: 100٪؛}
.bt2 .after {بوتوم: -10px؛}
.bt2. قبل {بوتوم: 0؛}
.bt2: هوفر. قبل {بوتوم: 45px؛}
.bt2: هوفر .after {بوتوم: 18px؛}
.bt2: بيفور {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.bt2: هوفر: بيفور {هيت: 100٪؛}
.bt3 .after {ليفت: -90px؛ توب: -18px؛}
.bt3. قبل {رايت: 0؛}
.bt3: هوفر. قبل {رايت: -90px؛}
.bt3: هوفر .after {ليفت: 0؛}
.bt3: قبل {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.bt3: هوفر: بيفور {ويدث: 100٪؛}
.bt4 .after {رايت: -90px؛ توب: -18px؛}
.bt4. قبل {ليفت: 0؛}
.bt4: هوفر. قبل {ليفت: -90px؛}
.bt4: هوفر .after {رايت: 0؛}
.bt4: بيفور {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: -1؛}
.bt4: هوفر: بيفور {ويدث: 100٪؛}
.bt5 .after {توب: -45px؛ z-إندكس: 9؛}
.bt5. قبل {توب: 0؛}
.bt5: هوفر. قبل {توب: -45px؛}
.bt5: هوفر .after {توب: -18px؛}
.bt5: بيفور {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ توب: 0؛ الانتقال: .4s. z-إندكس: 1؛}
.bt5: هوفر: بيفور {هيت: 100٪؛}
.bt6 .after {بوتوم: -10px؛ z-إندكس: 9؛}
.bt6. قبل {بوتوم: 0؛}
.bt6: هوفر. قبل {بوتوم: -45px؛}
.bt6: هوفر .after {بوتوم: 18px؛}
.bt6: بيفور {كونتنت: ""؛ ويدث: 100٪؛ هيت: 0؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: 1؛}
.bt6: هوفر: بيفور {هيت: 100٪؛}
.bt7 .after {ليفت: -90px؛ توب: -18px؛ z-إندكس: 9؛}
.bt7. قبل {رايت: 0؛}
.bt7: هوفر .before {رايت: 90px؛}
.bt7: هوفر .after {ليفت: 0؛}
.bt7: بيفور {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ ليفت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: 1؛}
.bt7: هوفر: بيفور {ويدث: 100٪؛}
.bt8 .after {رايت: -90px؛ توب: -18px؛ z-إندكس: 9؛}
.bt8. قبل {ليفت: 0؛}
.bt8: هوفر. قبل {ليفت: 90px؛}
.bt8: هوفر .after {رايت: 0؛}
.bt8: قبل {كونتنت: ""؛ ويدث: 0؛ ارتفاع: 100٪؛ بوسيتيون: أبسولوت؛ باكغروند-كولور: # 3395D0؛ رايت: 0؛ بوتوم: 0؛ الانتقال: .4s. z-إندكس: 1؛}
.bt8: هوفر: بيفور {ويدث: 100٪؛}
.bt9 .after {توب: -45px؛}
.bt9. قبل {توب: 0؛}
.bt9: هوفر. قبل {توب: 45px؛}
.bt9: هوفر .after {توب: -18px؛}
.bt9: هوفر {باكغروند-كولور: # 3395D0؛ الانتقال: .4s؛}
.bt10 .after {بوتوم: -10px؛}
.bt10. قبل {بوتوم: 0؛}
.bt10: هوفر. قبل {بوتوم: 45px؛}
.bt10: هوفر .after {بوتوم: 18px؛}
.bt10: هوفر {باكغروند-colour: # 3395D0؛ الانتقال: .4s؛}
.bt11 .after {ليفت: -90px؛ توب: -18px؛}
.bt11. قبل {رايت: 0؛}
.bt11: هوفر. قبل {رايت: -90px؛}
.bt11: هوفر .after {ليفت: 0؛}
.bt11: هوفر {باكغروند-كولور: # 3395D0؛ الانتقال: .4s؛}
.bt12 .after {رايت: -90px؛ توب: -18px؛}
.bt12. قبل {ليفت: 0؛}
.bt12: هوفر. قبل {ليفت: -90px؛}
.bt12: هوفر .after {رايت: 0؛}
.bt12: هوفر {باكغروند-كولور: # 3395D0؛ الانتقال: .4s؛}
.bt13 .after {توب: -45px؛ z-إندكس: 9؛}
.bt13. قبل {توب: 0؛}
.bt13: هوفر. قبل {توب: -45px؛}
.bt13: هوفر .after {توب: -18px؛}
.bt13: هوفر {باكغروند-كولور: # 3395D0؛ الانتقال: .4s؛}
.bt14 .after {بوتوم: -10px؛ z-إندكس: 9؛}
.bt14. قبل {بوتوم: 0؛}
.bt14: هوفر. قبل {بوتوم: -45px؛}
.bt14: هوفر .after {بوتوم: 18px؛}
.bt14: هوفر {باكغروند-كولور: # 3395D0؛ الانتقال: .4s؛}
.bt15 .after {ليفت: -90px؛ توب: -18px؛ z-إندكس: 9؛}
.bt15. قبل {رايت: 0؛}
.bt15: هوفر .before {رايت: 90px؛}
.bt15: هوفر .after {ليفت: 0؛}
.bt15: هوفر {باكغروند-كولور: # 3395D0؛ الانتقال: .4s؛}
.bt16 .after {رايت: -90px؛ توب: -18px؛ z-إندكس: 9؛}
.bt16. قبل {ليفت: 0؛}
.bt16: هوفر. قبل {ليفت: 90px؛}
.bt16: هوفر .after {رايت: 0؛}
.bt16: هوفر {باكغروند-كولور: # 3395D0؛ الانتقال: .4s؛}
/ * == زر تحوم كس نهاية == * /
4. الآن حفظ القالب الخاص بك والحصول على رموز هتمل من الرابط أدناه
رموز هتمل لكل أزرار CSS3
احصل الآن على شفرة هتمل من الرابط أدناه لكل أزرار.
الاعتمادات: http://tympanus.net/codrops/
0 التعليقات:
إرسال تعليق