حصريا اضافة ازرار المعاينة والتحميل بشكل احترافي

بسم الله السلام عليكم اعزائي تحياتي لك زائر اومتابع , موضوع اليوم عن ازرار المعاينة والتحميل لمدونات بلوجر, بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عندي لكم ازرار بشكل جداب وجميل جدا يمكنكم معاينته من هنا

نبدا في الشرح

نتوجه الى القالب ونبحث عن الكود التالي

]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
.boxy {
font-family: "Open Sans";
font-weight: 400;
font-size: 1.5em;
color: rgba(255, 255, 255, 0);
display: inline-block;
cursor: pointer;
text-decoration: none;
padding: 0.6em 1.6em;
margin: 0.6em;
border-style: solid;
border-width: 1px;
transition: all 0.2s ease;
border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round;
background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%);
background-clip: text;
-webkit-background-clip: text;
}
.boxy:hover {
box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4);
}
.boxy:hover {
color: rgba(255, 255, 255, 0.1);
text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
}
.boxy.red {
border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round;
background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%);
background-clip: text;
-webkit-background-clip: text;
}
.boxy.red:hover {
box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4);
}
.boxy.green {
border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round;
background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%);
background-clip: text;
-webkit-background-clip: text;
}
.boxy.green:hover {
box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4);
}
.boxy.la {
text-transform: uppercase;
font-weight: 300;
letter-spacing: 0.05em;
font-size: 3em;
padding: 0.3em;
border-width: 2px;
display: block;
width: 70%;
margin: 0.6em auto;
border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round;
background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%);
background-clip: text;
-webkit-background-clip: text;
}
.boxy.la:hover {
box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4);
}
p {
color: rgba(255, 255, 255, 0.7);
margin: 30px;
}