يحتوي هذا المقال علي بعض الأفكار والأمثلة لتصاميم أزرار رائعة بواسطة HTML , CSS . أتمني أن تفيدكم وتستلهموا منها أفكار جديدة ومبتكرة.

• الزر الأول

HTML

<a href="#" class="nr-1">الزر الأول</a>

CSS

a.nr-1 {
text-decoration: none;
font-weight: 700;
color: white;
font-size: 15px;
font-family: Dosis, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
display: inline-block;
background: rgb(214, 0, 0);
padding: 20px 30px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.07), 1px 1px 2px 0px rgba(0, 0, 0, 0.09);
-webkit-box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.07), 1px 1px 2px 0px rgba(0, 0, 0, 0.09);
box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.07), 1px 1px 2px 0px rgba(0, 0, 0, 0.09);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a.nr-1:hover {
background: rgb(80, 80, 80);
}

شكل الزر

See the Pen yLGbm by mohamed maher (@fwasl) on CodePen.4025

• الزر الثاني

HTML

<a href="#" class="nr-2">الزر الثاني</a>

CSS

a.nr-2 {
text-decoration: none;
font-weight: 400;
color: rgb(175, 175, 175);
font-size: 19px;
font-family: Dosis, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
display: inline-block;
padding: 20px 40px;
border: 1px solid rgb(223, 223, 223);
text-transform: uppercase;
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.nr-2:hover {
color: rgba(0, 149, 233, 1);
}

شكل الزر

See the Pen bFoCr by mohamed maher (@fwasl) on CodePen.4025

• الزر الثالث

HTML

<a href="#" class="nr-3">الزر الثالث</a>

CSS

a.nr-3 {
text-decoration: none;
font-weight: 800;
color: rgb(255, 255, 255);
font-size: 19px;
font-family: Dosis, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
display: inline-block;
padding: 20px 40px;
background: rgb(245, 176, 0);
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.04);
-webkit-box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.04);
box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.04);
-ms-transition: all 0.21s ease;
-moz-transition: all 0.21s ease;
-o-transition: all 0.21s ease;
transition: all 0.21s ease;
}
a.nr-3:hover {
background: rgb(213, 213, 213);
color: rgb(158, 158, 158);
text-shadow: none;
}

شكل الزر

See the Pen sxJmq by mohamed maher (@fwasl) on CodePen.4025