إضافة أزرار بتقنية css إحترافية حصريا على مدونة إحترف

"ازرار" Buttons" Css" أصبحت رائجه ومستعملة من قبل كثير من المدونين نظراً لأنها تضيف لمسة جمالية للمواضيع وأيضا هي تثير إنتباه القارئ وهناك عدة إضافات جاهزة تمكنم من صناعتها وكنا سابقا وضعنا موضوع حول شكل من اشكال الأزرار .
في هذا الموضوع يسأضع بين يديك مجموعة من الأزرار الإحترافية.
معاينة

طريقة التركيب
إبحث عن  </b:skin><[[  بالضغط على Crtl+F وأضف الكود التالي فوقه

[code type="CSS"] /* By Ihttarif */ @import "compass/css3"; .button1 { background: #9b59b6; display: inline-block; padding: 2rem 4rem; margin: 1rem; text-decoration: none; font: bold 1rem Sans-Serif; color: black; position: relative; overflow: hidden; @include transition(0.7s); &:before { content: ""; position: absolute; bottom: -40px; right: -40px; width: 10px; height: 10px; background: #222; border-radius: 50%; @include transition(0.7s); } span { position: relative; } &:hover, &:focus { color: white; &:before { width: 270px; height: 270px; opacity: 1; } } } .button2 { background: #3498db; display: inline-block; padding: 2rem 4rem; margin: 1rem; text-decoration: none; font: bold 1rem Sans-Serif; color: black; position: relative; overflow: hidden; @include transition(0.7s); &:before { content: ""; position: absolute; bottom: -40px; right: -40px; width: 10px; height: 10px; background: #222; border-radius: 50%; @include transition(0.7s); } span { position: relative; } &:hover, &:focus { color: white; &:before { width: 270px; height: 270px; opacity: 1; } } } .button3 { background: #e74c3c; display: inline-block; padding: 2rem 4rem; margin: 1rem; text-decoration: none; font: bold 1rem Sans-Serif; color: black; position: relative; overflow: hidden; @include transition(0.7s); &:before { content: ""; position: absolute; bottom: -40px; right: -40px; width: 10px; height: 10px; background: #222; border-radius: 50%; @include transition(0.7s); } span { position: relative; } &:hover, &:focus { color: white; &:before { width: 270px; height: 270px; opacity: 1; } } } .button4 { background: #f1c40f; display: inline-block; padding: 2rem 4rem; margin: 1rem; text-decoration: none; font: bold 1rem Sans-Serif; color: black; position: relative; overflow: hidden; @include transition(0.7s); &:before { content: ""; position: absolute; bottom: -40px; right: -40px; width: 10px; height: 10px; background: #222; border-radius: 50%; @include transition(0.7s); } span { position: relative; } &:hover, &:focus { color: white; &:before { width: 270px; height: 270px; opacity: 1; } } } .button5 { background: #1abc9c; display: inline-block; padding: 2rem 4rem; margin: 1rem; text-decoration: none; font: bold 1rem Sans-Serif; color: black; position: relative; overflow: hidden; @include transition(0.7s); &:before { content: ""; position: absolute; bottom: -40px; right: -40px; width: 10px; height: 10px; background: #222; border-radius: 50%; @include transition(0.7s); } span { position: relative; } &:hover, &:focus { color: white; &:before { width: 270px; height: 270px; opacity: 1; } } } .button:nth-child(1) { background: #9b59b6; } .button:nth-child(2) { background: #3498db; &:before { bottom: auto; top: -40px; } } .button:nth-child(3) { background: #e74c3c; &:before { right: auto; left: -40px; } } .button:nth-child(4) { background: #f1c40f; &:before { right: auto; bottom: auto; left: -40px; top: -40px; } } .button:nth-child(5) { background: #1abc9c; &:before { right: auto; bottom: auto; left: 90px; top: -40px; } &:hover, &:focus { &:before { left: -50px; } } } [/code]

وعندما تريد إضافة زر قم بإضافة أحد هذه الأكواد الخاصة بكل لون

[code type="HTML"] <!-- By Ihttarif --> <a href="#0" class="button1"><span>تحميل</span></a> <a href="#0" class="button2"><span>تحميل</span></a> <a href="#0" class="button3"><span>تحميل</span></a> <a href="#0" class="button4"><span>تحميل</span></a> <a href="#0" class="button5"><span>تحميل</span></a> [/code]