@charset "UTF-8"; /*! * * bttn.css - https://ganapativs.github.io/bttn.css * Version - 0.2.4 * Demo: https://bttn.surge.sh * * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Ganapati V S (@ganapativs) * */ /* standalone - .bttn-material-circle */ .bttn-default { color: #fff; } .bttn-primary, .bttn, .bttn-lg, .bttn-md, .bttn-sm, .bttn-xs { color: #1d89ff; } .bttn-warning { color: #feab3a; } .bttn-danger { color: #ff5964; } .bttn-success { color: #28b78d; } .bttn-royal { color: #bd2df5; } .bttn, .bttn-lg, .bttn-md, .bttn-sm, .bttn-xs { margin: 0; padding: 0; border-width: 0; border-color: transparent; background: transparent; font-weight: 400; cursor: pointer; position: relative; } .bttn-lg { padding: 8px 15px; font-size: 24px; font-family: inherit; } .bttn-md { font-size: 20px; font-family: inherit; padding: 5px 12px; } .bttn-sm { padding: 4px 10px; font-size: 16px; font-family: inherit; } .bttn-xs { padding: 3px 8px; font-size: 12px; font-family: inherit; } .bttn-material-circle { margin: 0; padding: 0; border-width: 0; border-color: transparent; background: transparent; font-weight: 400; cursor: pointer; position: relative; font-size: 20px; font-family: inherit; padding: 5px 12px; overflow: hidden; border-width: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18), 0 1px 5px 0 rgba(0,0,0,0.15); color: #1d89ff; -webkit-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .bttn-material-circle:hover, .bttn-material-circle:focus { box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15); -webkit-transition: box-shadow 0.4s ease-out; transition: box-shadow 0.4s ease-out; } .bttn-material-circle.bttn-xs { padding: 3px 8px; font-size: 12px; font-family: inherit; width: 28px; height: 28px; line-height: 24px; } .bttn-material-circle.bttn-sm { padding: 4px 10px; font-size: 16px; font-family: inherit; width: 36px; height: 36px; line-height: 30px; } .bttn-material-circle.bttn-md { font-size: 20px; font-family: inherit; padding: 5px 12px; width: 44px; height: 44px; line-height: 38px; } .bttn-material-circle.bttn-lg { padding: 8px 15px; font-size: 24px; font-family: inherit; width: 54px; height: 54px; line-height: 44px; } .bttn-material-circle.bttn-default { background: #fff; color: #1d89ff; } .bttn-material-circle.bttn-primary { background: #1d89ff; color: #fff; } .bttn-material-circle.bttn-warning { background: #feab3a; color: #fff; } .bttn-material-circle.bttn-danger { background: #ff5964; color: #fff; } .bttn-material-circle.bttn-success { background: #28b78d; color: #fff; } .bttn-material-circle.bttn-royal { background: #bd2df5; color: #fff; }