3DElements Revamped
Buttons
.btn
.btn-success
.btn-warning
.btn-danger
.btn-info
/*
Author: Matt Wisniewski
http://tinderlight.us
*/
.btn{text-shadow:0 0 13px rgba(0,0,0,.3);border:1px solid #bfbfbf;border-radius:5px;box-shadow:0 4px 0 #a5a5a5,0 5px 0 #565656,0 5px 10px rgba(0,0,0,.4);background-color:#f2f2f2}.btn:hover{text-shadow:0 0 13px #fff;margin-top:-2px;background-color:#efefef;top:-2px;box-shadow:0 7px 0 #a5a5a5,0 7px 0 #565656,0 7px 7px rgba(0,0,0,.4)}.btn:active{margin-top:2px;background-color:#efefef;top:2px;box-shadow:0...
Monday, 21 October 2013
Wednesday, 9 October 2013
Horizontal Hover Share Buttons
@import url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sYS_VGM_8X2rSYTWJXOxxo2krFehHwpHz1z9kcRgKH7Bcvz2facmfvXtcSCzB_0rWDkTD-I3xGaDxSUjX0ePvDKrC0lJVxayuevShXxa-Jvs1vR0PON7s=s0-d);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
border-radius: 5px;
padding: 14px 7px;
background: white;
width: 660px;
overflow: hidden;
margin: 150px auto 0;
box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);
}
.button {
background: #DCE0E0;
position: relative;
...
Shadow Butons Share
.buttons-preview {
margin: 10px auto;
max-width: 600px;
}
.button {
display: inline-block;
padding: 3.5%;
margin: 1.5%;
width: 40%;
float:left;
color: white;
text-align: center;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.facebook {
background: rgb(59,89,152);
}
.twitter {
background: rgb(32,148,202);
}
.google-plus {
background: rgb(199,53,37);
}
.pinterest...
JQuery CSS About Me Widget
.wrap {
max-width: 1120px;
margin: 0 auto;
}
/* about me */
#about {
padding: 8rem 0 0;
}
#about #location {
text-align: center;
padding:0 2rem;
margin-bottom: 9rem;
}
#about #location h2 {
font-size: 34px;
font-weight: 100;
/*color: #48535A;*/
color: #555;
margin-bottom: 5rem;
}
#about #location h2 > strong {
font-weight: bold;
}
#about #location .map {
background: url('../img/map.png') no-repeat center center;
background-size: 100%;
width: 620px;
height: 418px;
margin: 0 auto;
position: relative;
}
#about...
Round Social Subscription on Hover
ul.social-buttons img { width: 32px; height: 32px; padding:0; border: 0; margin: 0; }
.social-buttons li { list-style-type: none; float:left; padding-left: 16px; margin: 0 0 -20px 0; }
.facebook, .twitter, .flickr, .youtube, .vimeo, .pinterest {display: inline-block; position: relative; width: 32px; height: 32px;}
.facebook span.image, .twitter span.image, .flickr span.image, .youtube span.image, .vimeo span.image, .pinterest span.image {position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition:...
Cool Responsive Share Box
.social-buttons{ width: 100%; height: 64px; clear: both; margin-bottom: 16px; margin-top: 0px }
.social-buttons > .inner { width: 280px; margin: 0 24px }
.social-buttons > .inner a{ cursor: pointer }
.social-buttons > .inner a:hover { opacity: .8; -webkit-transition:-webkit-transform 0.5s ease-in-outl; -webkit-transform: scale(0.50) rotate(360deg)}
a.g-button{ display: block; float: left; width: 64px; height:64px; background: url("https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sxj2Bv7Pi4BS1jsHQhQhJKiWUwoZd7kxy5lR1pitZUQUh4WsfpLbVfITJmYChFo81mV_jw7zmgC53p9Xn4B6remy3qh8agxHIOLJM_-qyZU6UN=s0-d")...
On Hover Social Share Buttons {Responsive}
@import url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sO71xcX42gMY72fV_LkQeA1nyjAMKG9O8ObLitogajyD57IoDrBz5aOsoVEgIySnLmL-NG6utDnVvEGVNtZcopEwoQzVzw3SQtxMzVFWi-jx_fIg=s0-d);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
width: 475px;
overflow: hidden;
margin: 70px auto 0;
}
.button {
float: left;
margin-right: 10px;
width: 110px;
background: #eaeaea;
border: 1px solid #cbcbcb;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius:...
Sunday, 6 October 2013
Saturday, 5 October 2013
Stunning CSS Shutter Social Subscription WIdget Demo
1189
followers
421
+1
973
Like
ge...
Friday, 4 October 2013
Share 1
#googleplus {
float: left;
width: 80px;
background: #D4503F;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0 #ccc;
-webkit-box-shadow: 0 2px 0 #CCC;
box-shadow: 0 2px 0 #CCC;
}
#googleplus:hover {opacity:0.9;}
#retweet {
float: left;
width: 80px;
background: #51CDF6;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0 #ccc;
-webkit-box-shadow:...