السبت، 21 مارس 2015

  • أزرار مدزنة عرب ويب الاحترافية 2015


    السلام عليكم و مرحبا بجميع متابعي مدونتي,اليوم أحببت أن أشارككم هذا الموضوع لأن الكثير من إخواني الكرام أرادوا ان يحصلو على جميع أزرار مدونة عرب ويب لكن اليوم سأقدم لكم جميع الأزرار هدية منّي. لن أطيل عليكم


    المعاينة :


    طريقة التركيب
    1-اذهب الى القالب
    2-تحرير html
    3-ابحث باستعمال ctrl+F عن ]]></b:skin> و ضع فوقه هذا الكود
     .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/AVvXsEhDI-aycjw_Q8_3Y8iY4Cc1mF86O-wwrt3WvL5YE9BHt-zvYH5x-j_mhuBkPa2-Tsjk6sRWpmNj6aqNHMYtSf7gXuIA3qg_ori5dH7OkLq4kxP8Fuafyzr0e1QSQdGnOI1f9t3gm2pJ_b4/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/AVvXsEi6hmLtaYyRd1P-sIl4I9HH6risOyjggTEhRqE16yGg50sN302xig-Pc_qNnxOXHK60CkjeVTPH0YJ9ibT0Uc2x78-Q4TsrLzgyTOZ13yCdisR0cFi-iG9xtLuhOcWvRDRYncP5IBHrsJY/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
    }
    4-ضع تحت <style> هذا الكود (أي ما بين <style> و </style>)
     /* CSS Button Ar1web */
    .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);}

    *ضع الخطوط فوق </head>
    - خط ge_ss_tvbold

     <link href='http://cdn.jsdelivr.net/darfonts/0.1/tv-tha-tye-wide/stylesheet.css' rel='stylesheet'/>
     إذا واجهتك بعض المشاكل اترك تعليقك"

    طريقة تفعيل الأزرار
    أدخل تبويب html و ضع هذه الأكواد
     <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>
    * و أردت ان تضيف كود واحد ضع سطرا من هذه الأكواد 
    مرسلة بواسطة في
    التسميات:

    هناك تعليق واحد :

الاشتراك في: تعليقات الرسالة ( Atom )