: css


07-10-2015, 07:35 AM
css

http://i1.wp.com/www.stuffskeleton.com/wp-content/uploads/2014/01/animated-bubble-effect-buttons.gif?w=700 (http://i1.wp.com/www.stuffskeleton.com/wp-content/uploads/2014/01/animated-bubble-effect-buttons.gif?resize=555%2C387)

(http://www.jam3h.net/172375)


:
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>

realtime
07-13-2015, 07:29 AM