ازرار التحميل والمعاينة احترافية 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJrlqJXjBvvY5xv7XsA83DTWsdd7VwRxeBJGTc8orUSMc4AoPwgps_7iyaRofVZSb2dDXh8ZaM_7iZQANOcETnfcH_Wlhu54WnvyNwH_r5_3CpTOANNx6SJG3ZqryiDes3bH4fqMOERA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3kGhMcx-ODQgicC5YQb3TzTYBYyG39Jhz-HUT_r829tg3-PD-Tz1PmNtBIwrGz2O9RIi5PZPp15gHgfpcULoiRt029yWInGLfUYYxZkOozZBJEZgbsXSjJx1lxpcIuAj3DQCm6ES32A/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 - غير { هنا اسم } بالاسم المطلوب

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