@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-unite */ .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-unite { 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; z-index: 0; overflow: hidden; border: 1px solid #1d89ff; border-radius: 100px; background: #fff; color: #1d89ff; -webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); } .bttn-unite:before { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background: #d6e3ff; content: ''; opacity: 0; z-index: -1; -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(-110%, -10%, 0) skewX(-20deg); transform: translate3d(-110%, -10%, 0) skewX(-20deg); } .bttn-unite:after { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background: rgba(214,227,255,0.7); content: ''; opacity: 0; z-index: -1; -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(110%, -10%, 0) skewX(-20deg); transform: translate3d(110%, -10%, 0) skewX(-20deg); } .bttn-unite:hover, .bttn-unite:focus { box-shadow: 0 1px 8px rgba(58,51,53,0.3); color: #1d89ff; -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); } .bttn-unite:hover:before, .bttn-unite:focus:before { opacity: 1; -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(-50%, -10%, 0) skewX(-20deg); transform: translate3d(-50%, -10%, 0) skewX(-20deg); } .bttn-unite:hover:after, .bttn-unite:focus:after { opacity: 1; -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(50%, -10%, 0) skewX(-20deg); transform: translate3d(50%, -10%, 0) skewX(-20deg); } .bttn-unite.bttn-xs { padding: 3px 8px; font-size: 12px; font-family: inherit; } .bttn-unite.bttn-xs:hover, .bttn-unite.bttn-xs:focus { box-shadow: 0 1px 4px rgba(58,51,53,0.3); } .bttn-unite.bttn-sm { padding: 4px 10px; font-size: 16px; font-family: inherit; } .bttn-unite.bttn-sm:hover, .bttn-unite.bttn-sm:focus { box-shadow: 0 1px 6px rgba(58,51,53,0.3); } .bttn-unite.bttn-md { font-size: 20px; font-family: inherit; padding: 5px 12px; } .bttn-unite.bttn-md:hover, .bttn-unite.bttn-md:focus { box-shadow: 0 1px 8px rgba(58,51,53,0.3); } .bttn-unite.bttn-lg { padding: 8px 15px; font-size: 24px; font-family: inherit; } .bttn-unite.bttn-lg:hover, .bttn-unite.bttn-lg:focus { box-shadow: 0 1px 10px rgba(58,51,53,0.3); } .bttn-unite.bttn-default { border-color: #1d89ff; color: #1d89ff; } .bttn-unite.bttn-default:hover, .bttn-unite.bttn-default:focus { background: #d6e3ff; color: #1d89ff; } .bttn-unite.bttn-default:before { background: #a7c3ff; } .bttn-unite.bttn-default:after { background: #d6e3ff; } .bttn-unite.bttn-primary { border-color: #1d89ff; color: #1d89ff; } .bttn-unite.bttn-primary:hover, .bttn-unite.bttn-primary:focus { background: #1d89ff; color: #fff; } .bttn-unite.bttn-primary:before { background: #006de3; } .bttn-unite.bttn-primary:after { background: #1d89ff; } .bttn-unite.bttn-warning { border-color: #feab3a; color: #feab3a; } .bttn-unite.bttn-warning:hover, .bttn-unite.bttn-warning:focus { background: #feab3a; color: #fff; } .bttn-unite.bttn-warning:before { background: #f89001; } .bttn-unite.bttn-warning:after { background: #feab3a; } .bttn-unite.bttn-danger { border-color: #ff5964; color: #ff5964; } .bttn-unite.bttn-danger:hover, .bttn-unite.bttn-danger:focus { background: #ff5964; color: #fff; } .bttn-unite.bttn-danger:before { background: #ff1424; } .bttn-unite.bttn-danger:after { background: #ff5964; } .bttn-unite.bttn-success { border-color: #28b78d; color: #28b78d; } .bttn-unite.bttn-success:hover, .bttn-unite.bttn-success:focus { background: #28b78d; color: #fff; } .bttn-unite.bttn-success:before { background: #209271; } .bttn-unite.bttn-success:after { background: #28b78d; } .bttn-unite.bttn-royal { border-color: #bd2df5; color: #bd2df5; } .bttn-unite.bttn-royal:hover, .bttn-unite.bttn-royal:focus { background: #bd2df5; color: #fff; } .bttn-unite.bttn-royal:before { background: #a20bdd; } .bttn-unite.bttn-royal:after { background: #bd2df5; }