diff options
Diffstat (limited to 'colors.css')
| -rw-r--r-- | colors.css | 99 |
1 files changed, 98 insertions, 1 deletions
@@ -1 +1,98 @@ -/* CSS declarations go here */ +/* Base styles */ +#login-buttons-instagram { + font-size: 1.2em; + font-family: sans-serif; + color:#333; + text-shadow:1px 1px #fff; + text-decoration: none; + display:inline-block; + padding:0.5em 1.75em 0.5em 1em; + border-radius: 0.25em; + background: #f8f8f8; + border:1px solid #ccc; + border-right:0.25em solid #00558D; /* blue stripe */ + position: relative; + margin:0 0 1px; +} + +#login-buttons-instagram:before, #login-buttons-instagram:after { + content:''; + display:block; + position: absolute; +} + +/* Add Stripes */ +#login-buttons-instagram:before { + width:0.25em; + height: 100%; + background:#FBB03B; /* yellow stripe */ + border-left:0.25em solid #D4145A; /* red stripe */ + border-right:0.25em solid #00A99D; /* green stripe */ + top:0; + right:0; +} + +/* Add Hightlights */ +#login-buttons-instagram:after { + width:100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0.25em; + padding-left: 0.25em; + box-shadow: inset 1px 1px 0px rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.1); + +background: -moz-linear-gradient(top, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%); +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.35)), color-stop(49%,rgba(255,255,255,0.2)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1))); +background: -webkit-linear-gradient(top, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%); +background: -o-linear-gradient(top, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%); +background: -ms-linear-gradient(top, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%); +background: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#1a000000',GradientType=0 ); + +} + + +/* Animate - Fade */ +#login-buttons-instagram, #login-buttons-instagram:before { + -webkit-transition-property: background, border; + -webkit-transition: 0.1s ease-in; + -moz-transition-property: background, border; + -moz-transition: 0.1s ease-in; + -o-transition-property: background, border; + -o-transition: 0.1s ease-in; + transition-property: background, border; + transition: 0.1s ease-in; + +} + +/* Hover / Focus */ +#login-buttons-instagram:hover, #login-buttons-instagram:focus { + background: #fff; +} + +#login-buttons-instagram:hover { + border-right:0.25em solid #09c; +} + +#login-buttons-instagram:hover:before { + background:#fc6; /* yellow stripe */ + border-left:0.25em solid #f06; /* red stripe */ + border-right:0.25em solid #0cc; /* green stripe */ +} + +#login-buttons-instagram:hover:after { +background: -moz-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%); +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(49%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.05))); +background: -webkit-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%); +background: -o-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%); +background: -ms-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%); +background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#0d000000',GradientType=0 ); + +} + +/* Active */ +#login-buttons-instagram:active { + margin:1px 0 0; +}
\ No newline at end of file |