Pink and Blue CSS Buttons - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<link href='http://fonts.googleapis.com/css?family=Advent+Pro:700' rel='stylesheet' type='text/css'> <div class="container"> <div class="column left"> <h1>PINK BUTTONS</h1> <h2>Single Button</h2> <div class="btnBdr"> <a href="#">Single Link</a> </div> <div class="sidebar"> <h2>Menu of Buttons</h2> <div class="btnBdr"> <a href="#">First Link</a> <a href="#">Second Link</a> <a href="#">Third Link</a> <a href="#">Fourth Link</a> </div> </div> </div> <div class="column right"> <h1>BLUE BUTTONS</h1> <h2>Single Button</h2> <div class="btnBdr blue"> <a href="#">Single Link</a> </div> <div class="sidebar"> <h2>Menu of Buttons</h2> <div class="btnBdr blue"> <a href="#">First Link</a> <a href="#">Second Link</a> <a href="#">Third Link</a> <a href="#">Fourth Link</a> </div> </div> </div> </div>

body { background:#e2eff4; } body#button3d { background: #ffffff; } /* HEADINGS */ h1 { color:#F05C9F; font:50px/1.5em 'Advent Pro'; margin:0; text-align:center; text-transform:uppercase; } h2 { color:#C7DFE8; font:36px/1.5em 'Advent Pro'; margin:0; text-align:center; text-shadow:0 1px 0 #FFFFFF, 0 -1px 0 #8DB4C4; } /* END HEADINGS */ /* STRUCTURAL ELEMENTS */ .container { margin:0 auto; width:590px; } .column { margin:30px 0 80px; width:262px; } .column.left { border-right:2px dotted #b7d7e3; float:left; padding:0 36px 40px 0; } .column.left h1 { color:#E05593; text-shadow:0 1px 0 #FFFFFF, 0 -1px 0 #A53C6C; } .column.right { float:right; } .column.right h1 { color:#528aa1; text-shadow:0 1px 0 #FFFFFF, 0 -1px 0 #355e6e; } .sidebar { margin:25px auto 0; width:262px; } /* END STRUCTURAL ELEMENTS */ /* INDENTED BUTTON BORDER */ .btnBdr { background: #d1e5ec; border:1px solid #accdd9; display: inline-block; padding:6px; /* ROUNDED CORNERS */ -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; /* SHADOWS */ -webkit-box-shadow:inset 0px 0px 5px 0px #9fc7d6; -moz-box-shadow:inset 0px 0px 5px 0px #9fc7d6; -ms-box-shadow:inset 0px 0px 5px 0px #9fc7d6; -o-box-shadow:inset 0px 0px 5px 0px #9fc7d6; box-shadow:inset 0px 0px 5px 0px #9fc7d6; } /* END INDENTED BUTTON BORDER */ /* BUTTON STYLES */ .sidebar .btnBdr a { margin:0 0 -3px; /* ROUNDED CORNERS */ -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .sidebar .btnBdr a:first-of-type { /* ROUNDED CORNERS */ -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -ms-border-radius: 5px 5px 0px 0px; -o-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .sidebar .btnBdr a:last-of-type { margin:0; /* ROUNDED CORNERS */ -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -ms-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } .sidebar .btnBdr.blue a { margin:0 0 -3px; /* ROUNDED CORNERS */ -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .sidebar .btnBdr.blue a:first-of-type { /* ROUNDED CORNERS */ -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -ms-border-radius: 5px 5px 0px 0px; -o-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .sidebar .btnBdr.blue a:last-of-type { margin:0; /* ROUNDED CORNERS */ -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -ms-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } /* PINK */ .btnBdr a { background: #ff62aa; border: 1px solid #A53C6C; color: #a13c6b; display:block; font: normal 36px 'Advent Pro'; padding: 10px 18px 10px; text-decoration: none; text-align: center; text-shadow: 0 1px 0px #ff83bc, 0 -1px 0px #702a4a; text-transform:uppercase; width: 214px; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FF73B3 0%), to(#ce4d88 50%)); background-image: -webkit-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: -moz-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: -ms-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: -o-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); /* ROUNDED CORNERS */ -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; /* SHADOWS */ -webkit-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #A54470; -moz-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #A54470; -ms-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #A54470; -o-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #A54470; box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #A54470; } .btnBdr a:hover { background-color: #ff78b6; color:#ad4073; cursor: pointer; text-shadow: 0 1px 0px #ff92c4, 0 -1px 0px #823156; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff91bd 0%), to(#e35597 50%)); background-image: -webkit-linear-gradient(top, #ff91bd 0%, #fb60a7 50%, #f05c9f 50%, #e35597 100%); background-image: -moz-linear-gradient(top, #ff91bd 0%, #fb60a7 50%, #f05c9f 50%, #e35597 100%); background-image: -ms-linear-gradient(top, #ff91bd 0%, #fb60a7 50%, #f05c9f 50%, #e35597 100%); background-image: -o-linear-gradient(top, #ff91bd 0%, #fb60a7 50%, #f05c9f 50%, #e35597 100%); background-image: linear-gradient(top, #ff91bd 0%, #fb60a7 50%, #f05c9f 50%, #e35597 100%); /* SHADOWS */ -webkit-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #bc4d80; -moz-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #bc4d80; -ms-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #bc4d80; -o-box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #bc4d80; box-shadow:inset 0px 1px 0px 0px #ffbada, inset 0px -1px 0px 0px #bc4d80; } .btnBdr a:active { color:#a13c6b; text-shadow: 0 -1px 0px #ff92c4, 0 1px 0px #823156; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FF73B3 0%), to(#ce4d88 50%)); background-image: -webkit-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: -moz-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: -ms-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: -o-linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); background-image: linear-gradient(top, #FF73B3 0%, #EC5A9D 50%, #dc5492 50%, #ce4d88 100%); /* SHADOWS */ -webkit-box-shadow: inset 0 0 15px 0 #ae4374, inset 0px -1px 0px 0px #ffbada, inset 0px 1px 3px 0px #bc4d80, 0 1px 0 #fafafa; -moz-box-shadow: inset 0 0 15px 0 #ae4374, inset 0px -1px 0px 0px #ffbada, inset 0px 1px 3px 0px #bc4d80, 0 1px 0 #fafafa; -ms-box-shadow: inset 0 0 15px 0 #ae4374, inset 0px -1px 0px 0px #ffbada, inset 0px 1px 3px 0px #bc4d80, 0 1px 0 #fafafa; -o-box-shadow: inset 0 0 15px 0 #ae4374, inset 0px -1px 0px 0px #ffbada, inset 0px 1px 3px 0px #bc4d80, 0 1px 0 #fafafa; box-shadow: inset 0 0 15px 0 #ae4374, inset 0px -1px 0px 0px #ffbada, inset 0px 1px 3px 0px #bc4d80, 0 1px 0 #fafafa; } /* BLUE */ .btnBdr.blue a { background: #5a98b1; border: 1px solid #345867; color: #2f5463; display:block; font: normal 36px 'Advent Pro'; padding: 10px 18px 10px; text-decoration: none; text-align: center; text-shadow: 0 1px 0px #abd0df, 0 -1px 0px #2a4b58; text-transform:uppercase; width: 214px; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#64a9c5 0%), to(#4c8095 50%)); background-image: -webkit-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: -moz-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: -ms-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: -o-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); /* ROUNDED CORNERS */ -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; /* SHADOWS */ -webkit-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #345867; -moz-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #345867; -ms-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #345867; -o-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #345867; box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #345867; } .btnBdr.blue a:hover { background-color: #6aaac3; color:#345c6d; cursor: pointer; text-shadow: 0 1px 0px #abd0df, 0 -1px 0px #2a4b58; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#6db8d7 0%), to(#5b98b2 50%)); background-image: -webkit-linear-gradient(top, #6db8d7 0%, #67aecb 50%, #5e9db7 50%, #5b98b2 100%); background-image: -moz-linear-gradient(top, #6db8d7 0%, #67aecb 50%, #5e9db7 50%, #5b98b2 100%); background-image: -ms-linear-gradient(top, #6db8d7 0%, #67aecb 50%, #5e9db7 50%, #5b98b2 100%); background-image: -o-linear-gradient(top, #6db8d7 0%, #67aecb 50%, #5e9db7 50%, #5b98b2 100%); background-image: linear-gradient(top, #6db8d7 0%, #67aecb 50%, #5e9db7 50%, #5b98b2 100%); /* SHADOWS */ -webkit-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #3c6576; -moz-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #3c6576; -ms-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #3c6576; -o-box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #3c6576; box-shadow:inset 0px 1px 0px 0px #c7e4f0, inset 0px -1px 0px 0px #3c6576; } .btnBdr.blue a:active { color:#2f5463; text-shadow: 0 -1px 0px #abd0df, 0 1px 0px #2a4b58; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#64a9c5 0%), to(#4c8095 50%)); background-image: -webkit-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: -moz-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: -ms-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: -o-linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); background-image: linear-gradient(top, #64a9c5 0%, #5997b0 50%, #528aa1 50%, #4c8095 100%); /* SHADOWS */ -webkit-box-shadow: inset 0 0 15px 0 #3c6576, inset 0px -1px 0px 0px #c7e4f0, inset 0px 1px 3px 0px #3c6576, 0 1px 0 #fafafa; -moz-box-shadow: inset 0 0 15px 0 #3c6576, inset 0px -1px 0px 0px #c7e4f0, inset 0px 1px 3px 0px #3c6576, 0 1px 0 #fafafa; -ms-box-shadow: inset 0 0 15px 0 #3c6576, inset 0px -1px 0px 0px #c7e4f0, inset 0px 1px 3px 0px #3c6576, 0 1px 0 #fafafa; -o-box-shadow: inset 0 0 15px 0 #3c6576, inset 0px -1px 0px 0px #c7e4f0, inset 0px 1px 3px 0px #3c6576, 0 1px 0 #fafafa; box-shadow: inset 0 0 15px 0 #3c6576, inset 0px -1px 0px 0px #c7e4f0, inset 0px 1px 3px 0px #3c6576, 0 1px 0 #fafafa; } /* END BUTTON STYLES */ /* 3D BUTTON STYLES */ a.button3d { color:#ffffff; display:block; font: normal 36px 'KenyanCoffeeRegular'; height:55px; margin:50px auto 0; padding:10px 0 0 0; text-align:center; text-decoration:none; text-shadow:1px 1px 0 #000000; text-transform:uppercase; width:300px; /* ROUND CORNERS */ -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; border-radius:10px; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#003f58 0%), to(#006187 50%)); background-image: -webkit-linear-gradient(top, #005171 0%, #006187 100%); background-image: -moz-linear-gradient(top, #005171 0%, #006187 100%); background-image: -ms-linear-gradient(top, #005171 0%, #006187 100%); background-image: -o-linear-gradient(top, #005171 0%, #006187 100%); background-image: linear-gradient(top, #005171 0%, #006187 100%); /* SHADOWS */ -webkit-box-shadow: 0 1px 0 #003f58, 0 2px 0 #003f58, 0 3px 0 #003f58, 0 4px 0 #003f58, 0 5px 0 #003f58, 0 6px 0 #003f58, 0 7px 0 #003f58, 0 8px 0 #003f58, 0 9px 0 #003f58, 0 10px 0 #003f58, 0 11px 0 #003f58, 0 12px 0 #003f58, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -moz-box-shadow: 0 1px 0 #003f58, 0 2px 0 #003f58, 0 3px 0 #003f58, 0 4px 0 #003f58, 0 5px 0 #003f58, 0 6px 0 #003f58, 0 7px 0 #003f58, 0 8px 0 #003f58, 0 9px 0 #003f58, 0 10px 0 #003f58, 0 11px 0 #003f58, 0 12px 0 #003f58, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -ms-box-shadow: 0 1px 0 #003f58, 0 2px 0 #003f58, 0 3px 0 #003f58, 0 4px 0 #003f58, 0 5px 0 #003f58, 0 6px 0 #003f58, 0 7px 0 #003f58, 0 8px 0 #003f58, 0 9px 0 #003f58, 0 10px 0 #003f58, 0 11px 0 #003f58, 0 12px 0 #003f58, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -o-box-shadow: 0 1px 0 #003f58, 0 2px 0 #003f58, 0 3px 0 #003f58, 0 4px 0 #003f58, 0 5px 0 #003f58, 0 6px 0 #003f58, 0 7px 0 #003f58, 0 8px 0 #003f58, 0 9px 0 #003f58, 0 10px 0 #003f58, 0 11px 0 #003f58, 0 12px 0 #003f58, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; box-shadow: 0 1px 0 #003f58, 0 2px 0 #003f58, 0 3px 0 #003f58, 0 4px 0 #003f58, 0 5px 0 #003f58, 0 6px 0 #003f58, 0 7px 0 #003f58, 0 8px 0 #003f58, 0 9px 0 #003f58, 0 10px 0 #003f58, 0 11px 0 #003f58, 0 12px 0 #003f58, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; } a.button3d:hover { color:#ffffff; display:block; font: normal 36px 'KenyanCoffeeRegular'; height:55px; margin:50px auto 0; padding:10px 0 0 0; text-align:center; text-decoration:none; text-shadow:1px 1px 0 #000000; text-transform:uppercase; width:300px; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#00587b 0%), to(#006f9b 50%)); background-image: -webkit-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: -moz-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: -ms-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: -o-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: linear-gradient(top, #00587b 0%, #006f9b 100%); /* SHADOWS */ -webkit-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 0 #004d6b, 0 10px 0 #004d6b, 0 11px 0 #004d6b, 0 12px 0 #004d6b, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -moz-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 0 #004d6b, 0 10px 0 #004d6b, 0 11px 0 #004d6b, 0 12px 0 #004d6b, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -ms-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 0 #004d6b, 0 10px 0 #004d6b, 0 11px 0 #004d6b, 0 12px 0 #004d6b, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -o-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 0 #004d6b, 0 10px 0 #004d6b, 0 11px 0 #004d6b, 0 12px 0 #004d6b, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 0 #004d6b, 0 10px 0 #004d6b, 0 11px 0 #004d6b, 0 12px 0 #004d6b, 0 13px 20px #000000, 0 13px 2px #000000, 0 13px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; } a.button3d:active { color:#ffffff; margin:54px auto 0; /* GRADIENT */ background-image: -webkit-gradient(linear, left top, left bottom, from(#00587b 0%), to(#006f9b 50%)); background-image: -webkit-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: -moz-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: -ms-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: -o-linear-gradient(top, #00587b 0%, #006f9b 100%); background-image: linear-gradient(top, #00587b 0%, #006f9b 100%); /* SHADOWS */ -webkit-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 20px #000000, 0 9px 2px #000000, 0 9px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -moz-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 20px #000000, 0 9px 2px #000000, 0 9px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -ms-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 20px #000000, 0 9px 2px #000000, 0 9px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; -o-box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 20px #000000, 0 9px 2px #000000, 0 9px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; box-shadow: 0 1px 0 #004d6b, 0 2px 0 #004d6b, 0 3px 0 #004d6b, 0 4px 0 #004d6b, 0 5px 0 #004d6b, 0 6px 0 #004d6b, 0 7px 0 #004d6b, 0 8px 0 #004d6b, 0 9px 20px #000000, 0 9px 2px #000000, 0 9px 1px #000000, inset 0 0 20px #00405a, inset 0 1px 10px #4ea7ca; }

Tutorials Palace 20 December, 2018 No Comments

142 Views