@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-float */ .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-float { 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: 1px dotted #fff; border-radius: 4px; background: rgba(255,255,255,0.4); color: #fff; -webkit-transition: opacity 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.2s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); } .bttn-float:hover, .bttn-float:focus { box-shadow: 0 30px 30px rgba(0,0,0,0.16); opacity: 0.85; -webkit-transition: opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.4s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.4s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.4s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.4s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1); } .bttn-float.bttn-xs { padding: 3px 8px; font-size: 12px; font-family: inherit; } .bttn-float.bttn-xs:hover, .bttn-float.bttn-xs:focus { -webkit-transform: translateY(-6px); transform: translateY(-6px); } .bttn-float.bttn-sm { padding: 4px 10px; font-size: 16px; font-family: inherit; } .bttn-float.bttn-sm:hover, .bttn-float.bttn-sm:focus { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .bttn-float.bttn-md { font-size: 20px; font-family: inherit; padding: 5px 12px; } .bttn-float.bttn-md:hover, .bttn-float.bttn-md:focus { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .bttn-float.bttn-lg { padding: 8px 15px; font-size: 24px; font-family: inherit; } .bttn-float.bttn-lg:hover, .bttn-float.bttn-lg:focus { -webkit-transform: translateY(-12px); transform: translateY(-12px); } .bttn-float.bttn-default { border-color: #fff; background: rgba(255,255,255,0.4); color: #fff; } .bttn-float.bttn-primary { border-color: #1d89ff; background: rgba(29,137,255,0.4); color: #1d89ff; } .bttn-float.bttn-warning { border-color: #feab3a; background: rgba(254,171,58,0.4); color: #feab3a; } .bttn-float.bttn-danger { border-color: #ff5964; background: rgba(255,89,100,0.4); color: #ff5964; } .bttn-float.bttn-success { border-color: #28b78d; background: rgba(40,183,141,0.4); color: #28b78d; } .bttn-float.bttn-royal { border-color: #bd2df5; background: rgba(189,45,245,0.4); color: #bd2df5; }