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

[اميرة عبد الدايم]

ازرار css زجاجية متحركة لموقعك بتعديل الجامعة التطويرية
كود ازرار اخده من موقعي اجنبي كان لايعطي تاثيرات انا عملت عدلته حتا صار يعمل بشكل جيد احلى من قبل لتركيب صور مثال عن العمل

ومشاهدة مباشرة مع تجريب ازرار
اضغط هنا


شرح التركيب :
ضع هذا لكود في قالب 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;

background-image: linear-gradient(top, #f6f6f6, #eaeaea);

}

.buttons a:active {

top: 1px;

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

background-image: -webkit-linear-gradient(top, #eaeaea, #f6f6f6);

background-image: -moz-linear-gradient(top, #eaeaea, #f6f6f6);

background-image: -ms-linear-gradient(top, #eaeaea, #f6f6f6);

background-image: -o-linear-gradient(top, #eaeaea, #f6f6f6);

background-image: linear-gradient(top, #eaeaea, #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:

<a href=”#” class=”button blue medium”>TEXT HERE</a>

<a href=”#” class=”button green medium”>TEXT HERE</a>

<a href=”#” class=”button orange medium”>TEXT HERE</a>

<a href=”#” class=”button gray medium”>TEXT HERE</a>

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

رمز PHP:

<a href=”#” class=”button small blue”>TEXT HERE</a>

<a href=”#” class=”button small green”>TEXT HERE</a>

<a href=”#” class=”button small orange”>TEXT HERE</a>

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

<a href=”#” class=”button small blue rounded”>TEXT HERE</a>

<a href=”#” class=”button small green rounded”>TEXT HERE</a>

<a href=”#” class=”button small orange rounded”>TEXT HERE</a>