Home » Snippets » Metal UI Buttons Metal UI 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 <div class="pane"> <h1>Simple Buttons</h1> <span class="button"><p>N</p></span> <span class="button"><p>C</p></span> <span class="button"><p>H</p></span> <span class="button"><p>S</p></span> <span class="button"><p>U</p></span> <span class="button"><p>A</p></span> </div> <!-- Social buttons --> <div class="pane social"> <h1>Share Buttons</h1> <span class="button"><p class="t">t</p></span> <span class="button"><p class="s">s</p></span> <span class="button"><p class="y">y</p></span> <span class="button"><p class="f">f</p></span> <span class="button"><p class="g">g</p></span> <span class="button"><p class="k">k</p></span> <span class="button"><p class="l">l</p></span> <span class="button"><p class="m">m</p></span> </div> @font-face { font-family: 'pictos'; src: url('https://web-gate.fr/fonts/websymbols-regular-webfont.ttf'); src: url('https://web-gate.fr/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://web-gate.fr/fonts/websymbols-regular-webfont.woff') format('woff'), url('https://web-gate.fr/fonts/websymbols-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { background: #999; font-family: 'pictos'; } h1, h2, h3, H4 { font-family: helvetica; font-weight: bold; background-color: #333; /*background-clip*/ -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: rgba(0,0,0,0.3); text-shadow: rgba(255,255,255,0.3) 1px 1px 1px; } h1:before, h1:after { content: " - " } .pane { display: block; width: 520px; text-align: center; height: 260px; padding: 10px; margin: 20px auto; position: relative; /*box-shadow*/ -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1); box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1); border: 1px solid #5c5c5c; border-top: 1px solid #999; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: rgba(0,0,0,0.8); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%); background-image: -webkit-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%); background-image: -moz-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%); background-image: -ms-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%); background-image: -o-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%); /*background-size*/ -webkit-background-size: 5px 5px; -moz-background-size: 5px 5px; -o-background-size: 5px 5px; background-size: 5px 5px; } span { margin: 20px } p, .button { /*transition*/ -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; cursor: pointer; } span:hover>p { color: #00aeff; text-shadow: -1px -2px 1px #000; } .button { display: block; float: left; font-size: 28px; background-color: #434343; background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7A7A7A); background-image: linear-gradient(100% 100% 90deg, #515151, #7A7A7A); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#515151)); border: none; border-top: 3px solid #c2c2c2; /*border-radius*/ -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; /*box-shadow*/ -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222; -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222; box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222; padding: 10px; text-shadow: 0 1px 0 rgba(255,255,255,0.2); margin-right: 10px; text-decoration: none; color: #242424; background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%); } .button:before, .button:after { content: ""; top: 0; left: 0; position: absolute; width: inherit; height: inherit; /*border-radius*/ -webkit-border-radius: inherit; -moz-border-radius: inherit; border-radius: inherit; /* fake conical gradients */ background-image: -webkit-radial-gradient( 50% 0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), -webkit-radial-gradient( 50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), -webkit-radial-gradient( 0% 50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), -webkit-radial-gradient( 100% 50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%); } .button:before { /*transform*/ -webkit-transform: rotate( 65deg); -moz-transform: rotate( 65deg); -ms-transform: rotate( 65deg); -o-transform: rotate( 65deg); transform: rotate( 65deg); } .button:after { /*transform*/ -webkit-transform: rotate(-65deg); -moz-transform: rotate(-65deg); -ms-transform: rotate(-65deg); -o-transform: rotate(-65deg); transform: rotate(-65deg); } .button:active { border-top: 0px solid #dde1e7; /*box-shadow*/ -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa; -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa; box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa; /*transform*/ -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); -o-transform: translateY(4px); transform: translateY(4px); } /* Social btns */ .social span { width: 30px; height: 30px; margin: 15px; font-size: 20px; } .social span p { padding: 0; margin: 5px; } .social span:active { /*box-shadow*/ -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 7px #222, 0 4px 0 7px #222, 0px 0px 50px #FFF; -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 7px #222, 0 4px 0 7px #222, 0px 0px 50px #FFF; box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 7px #222, 0 4px 0 7px #222, 0px 0px 50px #FFF; } .social span:hover > .t { color: #53B1F0; text-shadow: -1px -1px 1px #000; } .social span:hover > .s { color: #00aeff; text-shadow: -1px -1px 1px #000; } .social span:hover > .y { color: #C30000; text-shadow: -1px -1px 1px #000; } .social span:hover > .f { color: #3B5998; text-shadow: -1px -1px 1px #000; } .social span:hover > .g { color: #D84335; text-shadow: -1px -1px 1px #000; } .social span:hover > .k { color: #32516C; text-shadow: -1px -1px 1px #000; } .social span:hover > .l { color: #71B6D9; text-shadow: -1px -1px 1px #000; } .social span:hover > .m { color: #44BBFF; text-shadow: -1px -1px 1px #000; } Tutorials Palace 10 January, 2019 No Comments 90 Views Metal UI Buttons CSS Buttons CSS Buttons Download Metal UI Buttons Code Fullscreen Tutor Play Walkthrough Related Snippets Box Shadow Editor Canvas Particles Emission Dripping Paint CSS3 Animation National flag of Mongolia Particles Emission Based on Mouse Moves Custom Cursor Images with CSS Particle System Leaving Trails CSS3 LT Form Particles Gravity Effect Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name * Email * Website Notify me of new posts by email.