Soothing Simple 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

<div> <a href="#">Previous Button</a> <a href="#">Next Button</a> </div>

div { margin: 20px auto; text-align: center; } a { font-family: sans-serif; font-size: 12px; text-decoration: none; padding: 8px 15px; border: 1px solid #C2CFD8; border-radius: 5px; color: #697B91; font-weight: bold; background-color: #FFFEFB; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFEFB), to(#F5F9FC)); background-image: -webkit-linear-gradient(top, #FFFEFB, #F5F9FC); background-image: -moz-linear-gradient(top, #FFFEFB, #F5F9FC); background-image: -ms-linear-gradient(top, #FFFEFB, #F5F9FC); background-image: -o-linear-gradient(top, #FFFEFB, #F5F9FC); background-image: linear-gradient(top, #FFFEFB, #F5F9FC); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFEFB', endColorstr='#F5F9FC',GradientType=0 ); -webkit-box-shadow: 0px 1px 2px #ddd; -moz-box-shadow: 0px 1px 2px #ddd; box-shadow: 0px 1px 2px #ddd; text-shadow: 0px 1px 1px #ddd; } a:active, a:focus { box-shadow: none; }

Tutorials Palace 7 August, 2018 No Comments

192 Views