היום, אוסף כפתורים לאתרים עם קוד הCSS שלהם מוכן להטמעה באתר שלכם בקלות. הסיבה העיקרית שבניתי דף זה היא מכיוון שנמאס לי לחפש כל הזמן כפתורים להטמעה בפרויקטים שאנו בונים כחלק משירותי בניית אתרי וורדפרס שאנו מספקים ללקוחות שונים.
איך מטמיעים כפתור?
פשוט לחצו על הכפתור הרצוי ויוצג לכם קוד שכולל את הCSS הנדרש עבור אותו כפתור.
קוד ראשוני עבור כל הכפתורים
קוד לדוגמה של כפתור
[html] <a href="" class="btn btn1"></a> // שימו לב לשנות את btn1 למספר הכפתור[/html]
קוד CSS בסיסי לכל כפתור
הוסיפו קוד זה לכל קוד CSS של כפתור בו בחרתם.
[css]
.btn {color: #fff; opacity: 0.8;}
.btn:hover, .btn:active {color: #fff;}
[/css]
כפתורים פשוטים
[css].btn1,.btn1:active {background: #262A2D; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn2,.btn2:active {background: #282E3A; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn3,.btn3:active {background: #434A5C; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn4,.btn4:active {background: #475059; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn5,.btn5:active {background: #5F6D87; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn6,.btn6:active {background: #375766; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn7,.btn7:active {background: #486577; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn8,.btn8:active {background: #297FA2; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn9,.btn9:active {background: #297AAF; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn10,.btn10:active {background: #E94D4E; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn11,.btn11:active {background: #F39F19; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn12,.btn12:active {background: #2FB266; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn13,.btn13:active {background: #80552A; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn14,.btn14:active {background: #BE990C; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn15,.btn15:active {background: #A7C57D; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn16,.btn16:active {background: #3598DC; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn17,.btn17:active {background: #6690A9; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
[css].btn18,.btn18:active {background: #B8B2A2; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}[/css]
כפתורים מרובעים
[css].btn1,.btn1:active {background: #262A2D; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn2,.btn2:active {background: #282E3A; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn3,.btn3:active {background: #434A5C; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn4,.btn4:active {background: #475059; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn5,.btn5:active {background: #5F6D87; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn6,.btn6:active {background: #375766; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn7,.btn7:active {background: #486577; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn8,.btn8:active {background: #297FA2; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn9,.btn9:active {background: #297AAF; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn10,.btn10:active {background: #E94D4E; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn11,.btn11:active {background: #F39F19; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn12,.btn12:active {background: #2FB266; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn13,.btn13:active {background: #80552A; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn14,.btn14:active {background: #BE990C; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn15,.btn15:active {background: #A7C57D; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn16,.btn16:active {background: #3598DC; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn17,.btn17:active {background: #6690A9; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn18,.btn18:active {background: #B8B2A2; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
כפתורים עם הצללה
[css].btn1,.btn1:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #262A2D; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn2,.btn2:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #282E3A; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn3,.btn3:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #434A5C; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn4,.btn4:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #475059; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn5,.btn5:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #5F6D87; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn6,.btn6:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #375766; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn7,.btn7:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #486577; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn8,.btn8:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #297FA2; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn9,.btn9:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #297AAF; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn10,.btn10:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #E94D4E; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn11,.btn11:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #F39F19; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn12,.btn12:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #2FB266; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn13,.btn13:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #80552A; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn14,.btn14:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #BE990C; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn15,.btn15:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #A7C57D; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn16,.btn16:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #3598DC; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn17,.btn17:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #6690A9; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
[css].btn18,.btn18:active {-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);background: #B8B2A2; opacity:1;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}[/css]
כפתורים עם אנימצית רקע פשוטה
[css]
.btn55,.btn55:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #262A2D; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn55:hover {background: #4E4E4E;}
[/css]
[css]
.btn56,.btn56:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #282E3A; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn55:hover {background: #444D61;}
[/css]
[css]
.btn57,.btn57:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #434A5C; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn57:hover {background: #67718B;}
[/css]
[css]
.btn58,.btn58:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #475059; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn58:hover {background: #667380;}
[/css]
[css]
.btn59,.btn59:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #5F6D87; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn59:hover {background: #8A9DC2;}
[/css]
[css]
.btn60,.btn60:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #375766; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn60:hover {background: #528197;}
[/css]
[css]
.btn61,.btn61:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #486577; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn61:hover {background: #658DA5;}
[/css]
[css]
.btn62,.btn62:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #297FA2; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn62:hover {background: #39AFDF;}
[/css]
[css]
.btn63,.btn63:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #297AAF; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn63:hover {background: #339CE0;}
[/css]
[css]
.btn64,.btn64:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #E94D4E; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn64:hover {background: #B1393A;}
[/css]
[css]
.btn65,.btn65:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #F39F19; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn65:hover {background: #BB7C18;}
[/css]
[css]
.btn66,.btn66:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #2FB266; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn66:hover {background: #278D52;}
[/css]
[css]
.btn67,.btn67:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #80552A; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn67:hover {background: #55391D;}
[/css]
[css]
.btn68,.btn68:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #BE990C; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn68:hover {background: #F7CA21;}
[/css]
[css]
.btn69,.btn69:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #A7C57D; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn69:hover {background: #8DBB4C;}
[/css]
[css]
.btn70,.btn70:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #3598DC; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn70:hover {background: #2974A7;}
[/css]
[css]
.btn71,.btn71:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #6690A9; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn71:hover {background: #5D7481;}
[/css]
[css]
.btn72,.btn72:active {-webkit-transition: background 500ms linear;-moz-transition: background 500ms linear;-o-transition: background-color 500ms linear;-ms-transition: background-color 500ms linear;transition: background-color 500ms linear;background: #B8B2A2; opacity:1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn72:hover {background: #8A8578;}
[/css]
כפתורים עם אייקונים
דרך קלה ליצור כפתורים עם אייקונים היא לכלול אל תוך הפרויקט שלכם את FontAwsome. התהליך כולל שני צעדים והוא דיי פשוט… הדגמה של כל האייקונים של FontAwesome תוכלו למצוא במאמר "פונט Awesome – ריכוז אייקונים".- הורידו את ספריית FontAwsome
- הכלילו את קובץ הCSS באתר שלכם
- וודאו שהמסלול נכון אל הקבצים בCSS
לאחר מכן:
לאחר שהכללתם את קבצי FontAwsome המבנה הסטנדרטי של כפתור עם לינק הוא
<a href="" class="btn btn1"> <i class="ICON NAME"></i> דוגמה</a>
מדריכים שווים לכפתורים עם אנימציה ואפקטים
כפתרו אל הפרויקט הבא שלכם
מקווה שאהבתם ושאתם מוצאים את האוסף לשימושי. חלק מהכפתורים אשר הצענו כאן כבר הפכו לקיצורי קוד שימושיים באתר שלנו ונשתמש בהם בפוסטים עתידיים. אם אתם רוצים לדעת איך אפשר להפוך כפתור לShortcode אתם מוזמנים לדבר איתנו על זה בפורום שלנו. אם אהבתם אל תשכחו לפרגן עם LIKE או פלוס 1 של גוגל
9 תגובות