@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-minimal */ .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-minimal { 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: 4px; background: transparent; color: #fff; -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-minimal:after { position: absolute; bottom: 0; left: 10px; width: calc(100% - 20px); height: 1px; background: currentColor; content: ''; opacity: 0.65; -webkit-transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); } .bttn-minimal:before { position: absolute; bottom: 0; left: 10px; width: calc(100% - 20px); height: 1px; background: currentColor; content: ''; opacity: 0.65; -webkit-transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); } .bttn-minimal:hover, .bttn-minimal:focus { opacity: 0.9; } .bttn-minimal:hover:after, .bttn-minimal:focus:after { opacity: 1; -webkit-transform: translateX(-10px) rotate(0.001deg); transform: translateX(-10px) rotate(0.001deg); } .bttn-minimal:hover:before, .bttn-minimal:focus:before { opacity: 1; -webkit-transform: translateX(10px) rotate(0.001deg); transform: translateX(10px) rotate(0.001deg); } .bttn-minimal.bttn-xs { padding: 3px 8px; font-size: 12px; font-family: inherit; } .bttn-minimal.bttn-sm { padding: 4px 10px; font-size: 16px; font-family: inherit; } .bttn-minimal.bttn-md { font-size: 20px; font-family: inherit; padding: 5px 12px; } .bttn-minimal.bttn-lg { padding: 8px 15px; font-size: 24px; font-family: inherit; } .bttn-minimal.bttn-default { color: #fff; } .bttn-minimal.bttn-primary { color: #1d89ff; } .bttn-minimal.bttn-warning { color: #feab3a; } .bttn-minimal.bttn-danger { color: #ff5964; } .bttn-minimal.bttn-success { color: #28b78d; } .bttn-minimal.bttn-royal { color: #bd2df5; }