أزرار إحترافية للويب بألوان فلات

السلام عليكم و رحمة الله و بركاته اليوم سأقدم لكم كيفية تركيب أزرار لمدونة بلوج الطريقة سهلة جدا ما عليك سوى أن تتبع الخطوات في الشرح
يمكنك معاينة الأزرار

name

name

name

name

name

name

name

name

name

name

name

name

الشرح:
1- ابحث عن ]]></b:skin>
2- و أضف هذا الكود تحته

 /* CSS Button Zied */
.button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {opacity:1;padding:7px 14px!important;background:#E83EE0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.demo:before {content:&#39;\f06e&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.download:before {content:&#39;\f019&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.download1 {opacity:1;padding:7px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;}
.download1:before {content:&#39;\f019&#39;;display:inline-block;margin-left:5px;width:16px;height:20px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;padding:3px;background:rgba(0, 0, 0, 0.2)padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-dark-button {opacity:1;padding:7px 14px!important;background:#425b71;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-dark-button:before {content:&#39;\f135&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-red-button {opacity:1;padding:7px 14px!important;background:#e4644b;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-red-button:before {content:&#39;\f0c3&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-RedHm-button {opacity:1;padding:7px 14px!important;background:#e74c3c;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-RedHm-button:before {content:&#39;\f127&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-pink-button {opacity:1;padding:7px 14px!important;background:#e75d66;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-pink-button:before {content:&#39;\f041&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-blue-button {opacity:1;padding:7px 14px!important;background:#3bbce0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-blue-button:before {content:&#39;\f058&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-tirquoise-button {opacity:1;padding:7px 14px!important;background:#00c5ad;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-tirquoise-button:before {content:&#39;\f0c2&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-green-button {opacity:1;padding:7px 14px!important;background:#99ca6a;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-green-button:before {content:&#39;\f07b&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-yellow-button {opacity:1;padding:7px 14px!important;background:#fac75b;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-yellow-button:before {content:&#39;\f084&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-gray-button {opacity:1;padding:7px 14px!important;background:#c9ced1;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-gray-button:before {content:&#39;\f0c1&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-purblehm-button {opacity:1;padding:7px 14px!important;background:#A954E4;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-purblehm-button:before {content:&#39;\f0c7&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-purblehm-button:hover,.flato-red-button:hover,.flato-RedHm-button:hover,.flato-pink-button:hover,.flato-blue-button:hover,.flato-tirquoise-button:hover,.flato-green-button:hover,.flato-yellow-button:hover,.flato-gray-button:hover,.flato-dark-button:hover,.demo:hover,.download1:hover,.download:hover {background:rgba(224, 90, 90, 0.72);text-shadow:0 0 1px #222;color:#fff;;}

3- أضف هذا الكود فوق ]]></b:skin>


.download1
{

padding:7px 14px!important;
opacity:1;

background:#3FA2FE;
color:#fff!important;

font-size:14px;
font-weight:400;

text-align:center;
font-family:Electrolize,'ge_ss_tvbold';

transition:background-color 1s 0 ease-out
text-transform:uppercase;
}

.download1:before
{
	content:'\f019';

line-height:24px;
display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;
	color:#fff;

background:rgba(0,0,0,0.2)padding: 3px;
font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);

opacity:1;
margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-dark-button
{

font-family:Electrolize,'ge_ss_tvbold';
padding:7px 14px!important;
	background:#425b71;
	color:#fff!important;
	font-weight:400;
	font-size:14px;
	text-align:center;

display:inline-block;
text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-dark-button:before
{
	content:'\f135';
	margin-left:5px;
	width:16px;

margin-right:-13px;
height:20px;
	line-height:24px;
	color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);

color:#fff!important;
padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-red-button
{
	opacity:1;
	padding:7px 14px!important;
	background:#e4644b;
	font-weight:400;

.zied-red-button:before
font-size:14px;
	font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

{
	content:'\f0c3';

background:rgba(0,0,0,0.2);
display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;
	line-height:24px;
	color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	margin-right:-13px;

font-size:14px;
padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-red1-button
{
	opacity:1;
	padding:7px 14px!important;
	background:#e74c3c;
	color:#fff!important;
	font-weight:400;

margin-left:5px;
font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-red1-button:before
{
	content:'\f127';
	display:inline-block;
	width:16px;

padding-right:7px
height:20px;
	line-height:24px;
	color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);
	margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
}


transition:background-color 1s 0 ease-out
.zied-pink-button
{
	opacity:1;
	padding:7px 14px!important;
	background:#e75d66;
	color:#fff!important;
	font-weight:400;
	font-size:14px;
	font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
}

background:rgba(0,0,0,0.2);
.zied-pink-button:before
{
	content:'\f041';
	display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;
	line-height:24px;
	color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;

font-family:Electrolize,'ge_ss_tvbold';
margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-blue-button
{
	opacity:1;
	padding:7px 14px!important;
	background:#3bbce0;
	color:#fff!important;
	font-weight:400;
	font-size:14px;

font-family:fontawesome;
text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-blue-button:before
{
	content:'\f058';
	display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;
	line-height:24px;
	color:#fff;

color:#fff!important;
transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);
	margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-teal-button
{
	opacity:1;
	padding:7px 14px!important;
	background:#00c5ad;
	font-weight:400;

line-height:24px;
font-size:14px;
	font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-teal-button:before
{
	content:'\f0c2';
	display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;

background:#99ca6a;
color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);
	margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-green-button
{
	opacity:1;
	padding:7px 14px!important;

margin-left:5px;
color:#fff!important;
	font-weight:400;
	font-size:14px;
	font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-green-button:before
{
	content:'\f07b';
	display:inline-block;
	width:16px;

padding:7px 14px!important;
height:20px;
	line-height:24px;
	color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);
	margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-yellow-button
{
	opacity:1;
	background:#fac75b;

width:16px;
color:#fff!important;
	font-weight:400;
	font-size:14px;
	font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-yellow-button:before
{
	content:'\f084';
	display:inline-block;
	margin-left:5px;
	height:20px;

color:#fff!important;
line-height:24px;
	color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);
	margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-gray-button
{
	opacity:1;
	padding:7px 14px!important;
	background:#c9ced1;

color:#fff;
font-weight:400;
	font-size:14px;
	font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-gray-button:before
{
	content:'\f0c1';
	display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;
	line-height:24px;

font-size:14px;
font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);
	margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}

.zied-purple-button
{
	opacity:1;
	padding:7px 14px!important;
	background:#A954E4;
	color:#fff!important;
	font-weight:400;

transition:all .5s ease-in-out;
font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}

.zied-purple-button:before
{
	content:'\f0c7';
	display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;
	line-height:24px;
	color:#fff;
	font-family:fontawesome;
	padding:3px;
	background:rgba(0,0,0,0.2);

.ziedweb:before
margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}
.ziedweb
{
	opacity:1;
	padding:7px 14px!important;
	background:#e74c3c;
	color:#fff!important;
	font-weight:400;
	font-size:14px;
	font-family:Electrolize,'ge_ss_tvbold';
	text-align:center;
	text-transform:uppercase;
	transition:background-color 1s 0 ease-out
}
{
	content:'\f127';

.zied-purple-button:hover,.zied-red-button:hover,.zied-red1-button:hover,.zied-pink-button:hover,.zied-blue-button:hover,.zied-teal-button:hover,.zied-green-button:hover,.zied-yellow-button:hover,.zied-gray-button:hover,.zied-dark-button:hover,.demo:hover,.download1:hover,.download:hover
display:inline-block;
	margin-left:5px;
	width:16px;
	height:20px;
	line-height:24px;
	color:#fff;
	font-family:fontawesome;
	transition:all .5s ease-in-out;
	padding:3px;
	background:rgba(0,0,0,0.2);
	margin-right:-13px;
	padding-bottom:8px;
	padding-left:7px;
	padding-right:7px
}



{
	background:rgba(0,0,0,0.6);
	text-shadow:0 0 1px #222;
	color:#fff
}

5- احفظ القالب

و لاستعمال الأزرار في موضوع : تبويب HTML

 <a class="zied-dark-button" href="#" target="_blank">name</a>
<a class="zied-red-button" href="#" target="_blank">name</a>
<a class="zied-purblehm-button" href="#" target="_blank">name</a>
<a class="zied-pink-button" href="#" target="_blank">name</a>
<a class="zied-red1-button" href="#" target="_blank">name</a>
<a class="zied-blue-button" href="#" target="_blank">name</a>
<a class="zied-teal-button" href="#" target="_blank">name</a>
<a class="zied-green-button" href="#" target="_blank">name</a>
<a class="zied-yellow-button" href="#" target="_blank">name</a>
<a class="zied-gray-button" href="#" target="_blank">name</a>

عنوان التدوينة: أزرار إحترافية للويب بألوان فلات
تقييم : 10 من 10 مرتكز على 24 تقييم.
المدير |زياد الزعبي

عدد المشاهدات :

Zied Zaabi

زياد الزعبي : من تونس, اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,زياد ويب

صندوق التدوينة

رابط مباشر :

كود للمنتديات :

HTML كود :