ازرار التحميل والمعاينة احترافية V3

السلام عليكم .... �� , لابد ان تتوفر مدونتك على ازرار سواء كان للمعاينة �� او للتحميل �� بشكل احترافى وجميل لتكون مدونتك احترافية �� وجميلة , وانا دائما ابحث لكم على الافضل , وكما طرحنا لكم أزرار بسيطة V1 و أزرار تحميل ومعانية احترافية V2 اليوم اود ان اقدم لكم ازرار التحميل والمعاينة احترافية V3
هذه الباقه الثالثه من ازرار بلوجر الاحترافية وهذه الازرار الاكثر جمالاً , سوف نطرحا لكم  , كى لا اطيل عليكم , تفضلو بمعاينة الاضافة .

شرح طريقة التركيب
1.اذهب الى تحرير القالب ثم ابحث عن ]]></b:skin> وضع الكود التالي فوقة

الكود

* CSS Button pro7web */
.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:#23A377;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 0s ease-out}
.download {opacity:1;padding:7px 14px!important;background:#fe4e3f;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 0s ease-out}
.demo:before {content:'\f06e';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:'\f019';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;}
.download1:before {content:'\f019';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-dark-button:before {content:'\f135';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-red-button:before {content:'\f0c3';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-RedHm-button:before {content:'\f127';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-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 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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-blue-button:before {content:'\f058';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-tirquoise-button:before {content:'\f0c2';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-green-button:before {content:'\f07b';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-yellow-button:before {content:'\f084';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-gray-button:before {content:'\f0c1';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,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-purblehm-button:before {content:'\f0c7';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;;}
/* CSS Simple Butn Ar1web */
.whitebutton {margin: 20px auto;padding: 20px 0;width: 230px;}
.whitebutton a {background: #282830;color: #FFF;display: block;font-size: 18.1px;font-weight: 700;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 230px;position: relative;z-index: 2;border-radius:2px}
.whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 230px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #DD2D39;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down {margin: -30px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-right: 6px;color: #aaa;}
.whitebutton:hover .up {opacity: 1;transform: translate(0,0);}
.whitebutton:hover .down {opacity: 1;transform: translate(0,-90px);}
.whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 230px;}
.whitebuttondemo a {background: #DD2D39;color: #fff;display: block;font-size: 18.1px;font-weight: 700;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 230px;position: relative;z-index: 2;transition: 350ms;border-radius:2px}
.whitebuttondemo a:before {content:'\f002';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebuttondemo a:hover {color:#fff;}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 230px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebuttondemo .up {background: #444;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebuttondemo:hover .up {opacity: 1;transform: translate(0,0);}
.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:#9eb2c0;
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
}
.download
{
opacity:1;
padding:7px 14px!important;
background:#fe4e3f;
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
}
.demo:before
{
content:'\f06e';
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
}
.download:before
{
content:'\f019';
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
}
.download1
{
opacity:1;
padding:7px 14px!important;
background:#3FA2FE;
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
}
.download1:before
{
content:'\f019';
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)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,'ge_ss_tvbold';
text-align:center;
text-transform:uppercase;
transition:background-color 1s 0 ease-out
}
.flato-dark-button:before
{
content:'\f135';
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
}
.flato-red-button
{
opacity:1;
padding:7px 14px!important;
background:#e4644b;
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
}
.flato-red-button:before
{
content:'\f0c3';
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
}
.flato-RedHm-button
{
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
}
.flato-RedHm-button:before
{
content:'\f127';
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
}
.flato-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;
transition:background-color 1s 0 ease-out
}
.flato-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;
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,'ge_ss_tvbold';
text-align:center;
text-transform:uppercase;
transition:background-color 1s 0 ease-out
}
.flato-blue-button:before
{
content:'\f058';
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
}
.flato-tirquoise-button
{
opacity:1;
padding:7px 14px!important;
background:#00c5ad;
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
}
.flato-tirquoise-button:before
{
content:'\f0c2';
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
}
.flato-green-button
{
opacity:1;
padding:7px 14px!important;
background:#99ca6a;
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
}
.flato-green-button:before
{
content:'\f07b';
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
}
.flato-yellow-button
{
opacity:1;
padding:7px 14px!important;
background:#fac75b;
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
}
.flato-yellow-button:before
{
content:'\f084';
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
}
.flato-gray-button
{
opacity:1;
padding:7px 14px!important;
background:#c9ced1;
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
}
.flato-gray-button:before
{
content:'\f0c1';
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
}
.flato-purblehm-button
{
opacity:1;
padding:7px 14px!important;
background:#A954E4;
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
}
.flato-purblehm-button:before
{
content:'\f0c7';
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
}
.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(0,0,0,0.6);
text-shadow:0 0 1px #222;
color:#fff
}
ul.flato-dropdown
{
text-align:center;
font-weight:400;
font-size:12px;
font-family:Electrolize,ge_ss_tvbold;
display:inline-block
}
ul.flato-dropdown li
{
background:#E9454C url(http://3.bp.blogspot.com/-eK9QA4-zBlM/VDAxN_3CM1I/AAAAAAAAGRs/pO54adLvPIA/s1600/arrow-right.png) no-repeat 12px center;
height:33px;
line-height:1px;
float:left;
display:inline;
width:173px;
margin-left:2px;
border-radius:3px
}
ul.flato-dropdown li:hover
{
background:#D3373D url(http://3.bp.blogspot.com/-J-RAWwPXHTI/VDAxNttXprI/AAAAAAAAGRo/1ituf5RlQtw/s1600/arrow-down.png) no-repeat 12px center;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
-moz-transition:.5s;
-o-transition:.5s;
transition:.5s
}
ul.flato-dropdown li:first-child
{
margin-left:0
}
ul.flato-dropdown li a
{
display:block;
color:#F5F5F5;
line-height:33px;
outline:none;
text-decoration:none
}
ul.flato-dropdown li a:hover
{
color:#fff;
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
transition:.5s
}
ul.flato-dropdown li ul
{
padding:6px 0 0;
visibility:hidden;
width:100%;
height:100%;
opacity:0
}
ul.flato-dropdown li:hover > ul
{
visibility:visible;
opacity:1;
-webkit-transition-duration:.7s;
-moz-transition-duration:.7s;
-o-transition-duration:.7s;
transition-duration:.7s
}
ul.flato-dropdown ul li
{
margin:0;
text-align:center;
border-top:1px solid #C03940;
background:#D3373D;
height:25px;
line-height:25px;
-moz-border-radius:0;
-webkit-border-radius:0;
-khtml-border-radius:0;
border-radius:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none
}
ul.flato-dropdown ul li:hover
{
background:#DA3B42;
-moz-border-radius:0;
-webkit-border-radius:0;
-khtml-border-radius:0;
border-radius:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none
}
ul.flato-dropdown ul li:first-child
{
border-top:none;
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
-khtml-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
behavior:url(PIE.htc)
}
ul.flato-dropdown ul li:last-child
{
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
-khtml-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
behavior:url(PIE.htc)
}
ul.flato-dropdown li:hover > ul
{
visibility:visible
}
ul.flato-dropdown li:hover > ul li
{
overflow:visible
}
ul.flato-dropdown ul li a
{
width:100%;
color:#F5F5F5;
line-height:25px;
overflow:hidden;
display:block
}

2.ثم ضع هذا الكود فى اى تدوينة لأظهار أزرار التحميل والمعاينة

الكود

 <a class="flato-dark-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-red-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-purblehm-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-pink-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-RedHm-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-blue-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-tirquoise-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-green-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-yellow-button" href="#" target="_blank">هنا اسم</a>

<a class="flato-gray-button" href="#" target="_blank">هنا اسم</a>

<a class="download" href="#" target="_blank">هنا اسم</a>

<a class="demo" href="#" target="_blank">هنا اسم</a> </code></pre>

التغييرات الأساسية 
1 - غير # } بالرابط المطلوب
2 - غير { هنا اسم } بالاسم المطلوب


لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

المشاركات الشائعة

أحدث التعليقات

رسالة!

نأسف بشده عن عدم الرد علي بعض تعليقاتكم ورسائلكم ، نظرا لانشغالي بالامتحانات ، اتمني منكم الدعاء لي بالنجاح ، واتمني لقم قضاء أجمل الاوقات معنا في " برو ويب " وسوف اعود لكم في 24/6

اذا كان لديكم اي استفسار مهم تفضلو بمراسلتني من حسابي علي الفيسبوك من هنا
تم النسخ