|
a:hover,button{background-color:#fff;color:#000}button{font-family:Comfortaa,sans-serif;border:2px solid #ecf0f1;border-radius:10px;font-size:20px;-webkit-transition:all .25s linear 0s;-o-transition:all .25s linear 0s;transition:all .25s linear 0s;-webkit-box-shadow:2px 2px 4px rgba(0,0,0,.4);box-shadow:2px 2px 4px rgba(0,0,0,.4);padding:.2em;position:relative;overflow:hidden}button:hover{border:2px solid #2c3e50;-webkit-box-shadow:4px 4px 6px #2c3e50;box-shadow:4px 4px 6px #2c3e50;cursor:pointer;-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px)}a{color:#2c3e50}a:hover{border-radius:5px}button:after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,.5);opacity:0;border-radius:50%;-webkit-transform:scale(1,1) translate(-70%);-ms-transform:scale(1,1) translate(-70%);transform:scale(1,1) translate(-70%);-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes ripple{0%{-webkit-transform:scale(0,0);transform:scale(0,0);opacity:1}20%{-webkit-transform:scale(25,25);transform:scale(25,25);opacity:1}100%{opacity:0;-webkit-transform:scale(40,40);transform:scale(40,40)}}@keyframes ripple{0%{-webkit-transform:scale(0,0);transform:scale(0,0);opacity:1}20%{-webkit-transform:scale(25,25);transform:scale(25,25);opacity:1}100%{opacity:0;-webkit-transform:scale(40,40);transform:scale(40,40)}}button:focus:not(:active)::after{-webkit-animation:ripple .75s ease-out;animation:ripple .75s ease-out}button:focus{outline:0}button:active{-webkit-transform:translateY(4px) scale(.9,.9);-ms-transform:translateY(4px) scale(.9,.9);transform:translateY(4px) scale(.9,.9)}button.normal{background:#34495e;color:#fff;-webkit-box-shadow:2px 2px 4px #2c3e50;box-shadow:2px 2px 4px #2c3e50}button.danger:hover,button.guide:hover,button.info:hover,button.normal:hover,button.success:hover,button.warning:hover{border:2px solid #ecf0f1}button.danger{color:#fff;background:#e74c3c;-webkit-box-shadow:2px 2px 4px #f08080;box-shadow:2px 2px 4px #f08080}button.success{color:#fff;background:#27ae60;-webkit-box-shadow:2px 2px 4px #2ecc71;box-shadow:2px 2px 4px #2ecc71}button.info{color:#fff;background:#3498db;-webkit-box-shadow:2px 2px 4px #2980b9;box-shadow:2px 2px 4px #2980b9}button.warning{color:#fff;background:#f39c12;-webkit-box-shadow:2px 2px 4px #f39c12;box-shadow:2px 2px 4px #f39c12}button.guide{color:#fff;background:#9b59b6;-webkit-box-shadow:2px 2px 4px #9b59b6;box-shadow:2px 2px 4px #9b59b6}button.danger2,button.guide2,button.info2,button.normal2,button.success2,button.warning2{background-color:#fff}button.normal2{color:#34495e;-webkit-box-shadow:2px 2px 4px #2c3e50;box-shadow:2px 2px 4px #2c3e50}button.normal2:hover{border:2px solid #2c3e50}button.danger2{color:#e74c3c;-webkit-box-shadow:2px 2px 4px #f08080;box-shadow:2px 2px 4px #f08080}button.danger2:hover{border:2px solid #f08080}button.success2{color:#27ae60;-webkit-box-shadow:2px 2px 4px #2ecc71;box-shadow:2px 2px 4px #2ecc71}button.success2:hover{border:2px solid #2ecc71}button.info2{color:#3498db;-webkit-box-shadow:2px 2px 4px #2980b9;box-shadow:2px 2px 4px #2980b9}button.info2:hover{border:2px solid #2980b9}button.warning2{color:#f39c12;-webkit-box-shadow:2px 2px 4px #f39c12;box-shadow:2px 2px 4px #f39c12}button.warning2:hover{border:2px solid #f39c12}button.guide2{color:#9b59b6;-webkit-box-shadow:2px 2px 4px #9b59b6;box-shadow:2px 2px 4px #9b59b6}button.guide2:hover{border:2px solid #9b59b6} |
