مجموعة أزرار اقرأ المزيد بتقنية CSS مع التأثير لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته 

اليوم سوف أتطرق إلى طريقة إضافة أزرار اقرأ المزيد بتقنية CSS مع التأثير وسوف أطرح في هذا الدرس 10 أزرارمع التأثيرات على هذه الأزرار وهذه التأثيرات في غاية الروعة ، وأتمنى من الله أن تنال إعجابكم .

- طريقة التركيب :

1- إدخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم :  ]]></b:skin>

3- ضع كود التأثير فوقه .

- زر اقرأ المزيد  الأول :

الكود

.jump-link
{
float:left; margin:1%  1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
background:#333333;
color:#ffffff;
margin:14px 14px 14px;
padding:12px 12px 12px;
text-decoration:none;
font:120% 'Oswald',Sans-Serif;
}
.jump-link a:hover
{
background:#F80505;
color:#ffffff;
}

- زر اقرأ المزيد  الثاني :

.jump-link
{
float:left;margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
padding:6px 6px 6px;
color: #000000;
margin:10px 10px 10px;
font:100% 'Oswald',Sans-Serif;
background-color:#F8FAFD;
text-decoration:none;
border-right:10px solid #05A8FC;
box-shadow:1px 1px 2px gainsboro;
transition: border-right .777s;
-webkit-transition: border-right .777s;
-moz-transition: border-right .777s;
-o-transition: border-right .777s;
-ms-transition: border-right .777s;
}
.jump-link a:hover
{
border-right:10px solid #FC2B2C;
color:#222222;
}

- زر اقرأ المزيد  الثالث :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
padding:6px 6px 6px;
color: #000000;
margin:10px 10px 10px;
font:100% 'Oswald',Sans-Serif;
background-color:#F8FAFD;
text-decoration:none;
border: 1px solid #cccccc;
border-bottom: 4px solid #03DA03;
box-shadow:1px 1px 2px gainsboro;
transition: border-right .777s;
-webkit-transition: border-right .777s;
-moz-transition: border-right .777s;
-o-transition: border-right .777s;
-ms-transition: border-right .777s;
}
.jump-link a:hover
{
border-bottom: 4px solid #003F80;
color:#222222;
}

- زر اقرأ المزيد الرابع :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
padding:6px 6px 6px;
color: #000000;
margin:10px 10px 10px;
font:100% 'Oswald',Sans-Serif;
background-color:#F8FAFD;
text-decoration:none;
border:3px dashed #000000;
border-bottom:5px solid #000000;
box-shadow:1px 1px 2px gainsboro;
transition: border-right .777s;
-webkit-transition: border-right .777s;
-moz-transition: border-right .777s;
-o-transition: border-right .777s;
-ms-transition: border-right .777s;
}
.jump-link a:hover
{
border:3px dashed #000000;
color:#222222;
}

- زر اقرأ المزيد الخامس :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
color:#FFFFFF;
margin:5px 10px 5px 4px;
padding:9px 10px 9px 10px;
font:100% 'Oswald',Sans-Serif;
background-color:#000000;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}
.jump-link a:hover
{
background-color:#05B6F8;
color:#FFFFFF;
}

- زر اقرأ المزيد السادس :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
color:#333333;
margin:5px 10px 5px 4px;
padding:9px 10px 9px 10px;
border:5px dashed #000000;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
font:100% 'Oswald',Sans-Serif;
text-decoration:none;
text-transform:uppercase;
}
.jump-link a:hover
{
border:5px dashed #0572F8;
color:#0572F8;
}

- زر اقرأ المزيد السابع :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
color:#333333;
margin:5px 10px 5px 4px;
padding:9px 10px 9px 10px;
border:5px dotted rgb(251, 10, 38);
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
font:100% 'Oswald',Sans-Serif;
text-decoration:none;
text-transform:uppercase;
}
.jump-link a:hover
{
border:5px dotted #000000;
color:#333333;
}

- زر اقرأ المزيد الثامن :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
color:#333333;
margin:5px 10px 5px 4px;
padding:9px 10px 9px 10px;
border: 3px dashed #E2E2E2;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
font:100% 'Oswald',Sans-Serif;
text-decoration:none;
text-transform:uppercase;
}
.jump-link a:hover
{
border: 3px dashed #000000;
color:#333333;
}

- زر اقرأ المزيد التاسع :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
color:#333333;
margin:5px 10px 5px 4px;
padding:9px 10px 9px 10px;
border: 5px double #B8B4B4;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font:100% 'Oswald',Sans-Serif;
text-decoration:none;
text-transform:uppercase;
}
.jump-link a:hover
{
border: 5px double #000000;
color:#333333;
}

- زر اقرأ المزيد العاشر :

.jump-link
{
float:left;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
color:#333333;
margin:5px 10px 5px 4px;
padding:9px 10px 9px 10px;
border: 8px inset #0572F8;
font:100% 'Oswald',Sans-Serif;
text-decoration:none;
text-transform:uppercase;
}
.jump-link a:hover
{
border: 8px inset #05B6F8;
color:#333333;
}

وأخيراً أترككم برعاية الله وتوفيقه