منتديات كيو للشركات العربية - ازرار css زجاجية متحركة لموقعك بتعديل الجامعة التطويرية

ازرار css زجاجية متحركة لموقعك بتعديل الجامعة التطويرية
كود ازرار اخده من موقعي اجنبي كان لايعطي تاثيرات انا عملت عدلته حتا صار يعمل بشكل جيد احلى من قبل لتركيب صور مثال عن العمل
http://i1.wp.com/www.stuffskeleton.c...tons.gif?w=700
ومشاهدة مباشرة مع تجريب ازرار
اضغط هنا

شرح التركيب :
ضع هذا لكود في قالب css اضافي لموقعك
رمز PHP:

.button {

font:15px Calibri, Arial, sans-serif;

text-shadow:1px 1px 0 rgba(255,255,255,0.4);

text-decoration:none!important;

white-space:nowrap;

display:inline-block;

vertical-align:baseline;

position:relative;

cursor:pointer;

background-repeat:no-repeat;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

background-position:bottom left, top right, 0 0 0 0;

background-clip:border-box;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px;

-moz-box-shadow:0 0 1px #000 inset;

-webkit-box-shadow:0 0 1px #000 inset;

box-shadow:0 0 1px #000 inset;

-webkit-transition:background-position 1s;

-moz-transition:background-position 1s;

transition:background-position 1s;

padding:10px 20px;

}

.button:hover {

background-position:top left, bottom right, 0 0 0 0;

}

.button:active {

bottom:-1px;

}

.button.big {

font-size:30px;

}

.button.medium {

font-size:19px;

}

.button.small {

font: bold 11px 'Droid Arabic Kufi', tahoma;

}

.button.rounded {

-moz-border-radius:4em;

-webkit-border-radius:4em;

border-radius:4em;

}

.blue.button {

color:#fff;

border:1px solid #84acc3!important;

background-color:#48b5f2;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

padding:12px;

font: bold 12px 'Droid Arabic Kufi', tahoma;

-width:130px;

text-align:center;

}

.blue.button:hover {

background-color:#63c7fe;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

background-position:-50px;

}

.green.button {

color:#345903!important;

border:1px solid #96a37b!important;

background-color:#79be1e;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

padding:12px;

font: bold 12px 'Droid Arabic Kufi', tahoma;

-width:130px;

text-align:center;

}

.green.button:hover {

background-color:#89d228;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

background-position:-50px;

}

.orange.button {

color:#693e0a!important;

border:1px solid #FFB085!important;

background-color:#e38d27;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

}

.orange.button:hover {

background-color:#ec9732;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

background-position:-50px;

}

.gray.button {

color:#525252!important;

border:1px solid #F6DACB!important;

background-color:#F6CBE7;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

}

.gray.button:hover {

background-color:#FFACE2;

background-image:url(http://www.jam3h.net/img_site_traidnt_net/widgetgenerators.jam3h.net-button_bg.png);

background-position:-50px;

}

.IconTitle {

background: none repeat scroll 0 0 #d2e9e9;

border-radius: 0px 0px 7px 7px;

-moz-border-radius: 0px 0px 7px 7px;

-webkit-border-radius: 0px 0px 7px 7px;

color: #333333;

font: 12px 'Exo 2' ,'Droid Arabic Kufi';

margin: 5px 0;

padding: 2px;

text-shadow: 0 1px 0 #fff;

-border:1px #FF9900 solid;

}

.buttons {

margin-top: 160px;

}

.buttons a {

margin-right: 30px;

width: 64px;

height: 64px;

display: inline-block;

position: relative;

line-height: 64px;

background-color: #eaeaea;

-moz-border-radius: 32px;

-webkit-border-radius: 32px;

border-radius: 32px;

}

.buttons a:active {

top: 1px;

background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));

}

.buttons a::before{

content: '';

position: absolute;

z-index: -1;

top: -8px;

right: -8px;

bottom: -8px;

left: -8px;

background-color: #eaeaea;

-moz-border-radius: 140px;

-webkit-border-radius: 140px;

border-radius: 140px;

opacity: 0.5;

}

.buttons a:active::before {

top: -9px;

}

.buttons a:hover::before { opacity: 1; }

.buttons a.twitter:hover::before {

background-color: #c6f0f8;

}

.buttons a.facebook:hover::before {

background-color: #dae1f0;

}

.buttons a.dribble:hover::before {

background-color: #fadae6;

}

.buttons a.rss:hover::before {

background-color: #f8ebb6;

}

.twitter img { vertical-align: -7px; }

.dribble img { vertical-align: -12px; }

.facebook img { vertical-align: -12px;}

.rss img { vertical-align: -7px;}

.buttons a img { border: 0; }

.footer {

width: 600px;

margin: auto;

margin-top: 100px;

font-size: 15px;

font-weight: bold;

color: #cdcdcd;

text-shadow: 1px 2px 0 #fff;

}

.footer a { color: #bebebe; text-decoration: none; }

.footer a:hover { color: #bebebe; text-decoration: none; border-bottom: 1px dashed #cdcdcd; }

#scrollToTop:link,#scrollToTop:visited{display:non e;position:fixed;bottom:50px;right:-6px}.totop{height:48px;width:48px;display:block;ba ckground:url(images/ToTop.png) no-repeat}.totop:hover{background:url(images/ToTop.png) no-repeat 0 -49px}

ازرار بحجم كبير
رمز Code:
<a href=”#” class=”button big blue”>TEXT HERE</a> <a href=”#” class=”button big green”>TEXT HERE</a> <a href=”#” class=”button big orange”>TEXT HERE</a>

ازرار بحجم متوسط
رمز PHP:

ازرار بحجم صغير

رمز PHP:

ازرار بحجم اصغر من الصغير
رمز PHP: