CreativeButton

root / css / CreativeButton.min.css

CreativeButton.min.css

6.4 KB CSS
.unvisible{display:none !important}.no-selection{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-khtml-user-select:none;-o-user-select:none}input{outline:none}section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0.25rem 0.5rem}.offset_light{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}.offset_standard{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}span,label{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.om-button{display:inline-block;font-size:0.8rem;padding:0.5rem;text-align:center;background:rgba(255,255,255,0.3);border:solid 2px rgba(255,255,255,0);height:1.0rem;border-radius:5px;cursor:pointer;-webkit-transition:opacity 1.0s, background-color 1.0s, -webkit-transform 0.3s;transition:opacity 1.0s, background-color 1.0s, -webkit-transform 0.3s;transition:transform 0.3s, opacity 1.0s, background-color 1.0s;transition:transform 0.3s, opacity 1.0s, background-color 1.0s, -webkit-transform 0.3s}.om-button:hover{-webkit-transform:scale(0.98);transform:scale(0.98)}.om-button:active{border:solid 1px rgba(255,255,255,0.9)}.om-button__icon,.om-button__text{width:1.0rem;height:1.0rem}.om-button__icon:hover,.om-button__text:hover{border:solid 2px rgba(255,255,255,0.3);background:rgba(255,255,255,0.4);-webkit-transform:scale(0.9);transform:scale(0.9)}.om-button__icon:active,.om-button__text:active{border:solid 2px rgba(255,255,255,0.9);background:rgba(255,255,255,0.2);-webkit-transform:translateY(-3px);transform:translateY(-3px);-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.2);box-shadow:0 10px 20px rgba(0,0,0,0.2)}.om-button__content{width:100%;font-weight:600;border-radius:unset;border:solid 1px rgba(255,255,255,0.3)}.om-button__content:hover{border:solid 1px rgba(255,255,255,0.4);background:rgba(255,255,255,0.4);-webkit-transform:scale(0.98);transform:scale(0.98)}.om-button__content:active{background:rgba(255,255,255,0.2)}.om-button__help::after{content:attr(data-help);opacity:0;-webkit-transition:0.3s all;transition:0.3s all}.om-button__help:hover::after{position:absolute;left:20%;top:80%;z-index:1;background:rgba(0,0,0,0.9);padding:5px 10px;border:1px solid #333;border-bottom:1px solid #fff;opacity:1;-webkit-transition-delay:1s;transition-delay:1s}@-webkit-keyframes moveInBottom{0%{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}100%{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px)}}@keyframes moveInBottom{0%{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}100%{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px)}}.om-field{text-align:center;font-size:1.0rem;font-family:'Montserrat', sans-serif;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;background:rgba(255,255,255,0.2);border:solid 1px rgba(255,255,255,0.3);color:#fff;-webkit-transition:all 0.3s;transition:all 0.3s}.om-field:hover{background:rgba(255,255,255,0.3)}.om-field:active{border:solid 1px rgba(255,255,255,0.9)}.om-field:focus{border:solid 1px #fff}.creativebutton-managebutton{padding-top:0.5rem}.creativebutton-managebutton__field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:0 0.5rem}.creativebutton-managebutton__button_code:hover::after{left:-80%}.creativebutton-menuoverlay{height:0;width:100%;position:absolute;z-index:1;left:0;background-color:rgba(0,0,0,0.95);overflow:scroll;scrollbar-width:none;-webkit-transition:0.3s;transition:0.3s}.creativebutton-menuoverlay::-webkit-scrollbar{display:none}.creativebutton-menuoverlay__content{position:relative;width:100%;text-align:center;margin:1.0rem 0}.creativebutton-menuoverlay__element{padding:0.8rem;word-wrap:no-wrap;margin:1rem 30%;background:rgba(255,255,255,0.1);border:solid 1px rgba(255,255,255,0);display:block;position:relative;-webkit-transition:all 0.3s;transition:all 0.3s}.creativebutton-menuoverlay__element::before{content:"\1405";width:100px;border:solid 1px rgba(255,255,255,0);font-size:1.5rem;left:-5rem;top:calc(50% - 1.1rem);position:absolute;-webkit-transition:all 0.3s;transition:all 0.3s;opacity:0}.creativebutton-menuoverlay__element:active{background:#fff !important;color:#000}.creativebutton-menuoverlay__element:hover{letter-spacing:1px;background:rgba(255,255,255,0);border-top:solid 1px rgba(255,255,255,0.25);border-bottom:solid 1px rgba(255,255,255,0.25);-webkit-transform:scale(1.2);transform:scale(1.2);cursor:pointer}.creativebutton-menuoverlay__element:hover::before{opacity:1}.creativebutton-normalstate>*,.creativebutton-hoverstate>*,.creativebutton-pressedstate>*{margin:0 0.25rem}.creativebutton-normalstate>:first-child,.creativebutton-hoverstate>:first-child,.creativebutton-pressedstate>:first-child{margin:0}.creativebutton-normalstate>:nth-child(2),.creativebutton-hoverstate>:nth-child(2),.creativebutton-pressedstate>:nth-child(2){margin-left:0}.creativebutton-normalstate>:last-child,.creativebutton-hoverstate>:last-child,.creativebutton-pressedstate>:last-child{margin-right:0}.creativebutton-normalstate>:last-child:hover::after,.creativebutton-hoverstate>:last-child:hover::after,.creativebutton-pressedstate>:last-child:hover::after{left:-80%}.creativebutton-normalstate__field,.creativebutton-hoverstate__field,.creativebutton-pressedstate__field{width:3.0rem}.creativebutton-normalstate__button_font,.creativebutton-hoverstate__button_font,.creativebutton-pressedstate__button_font{width:6.0rem;-webkit-box-flex:0.9;-ms-flex-positive:0.9;flex-grow:0.9}.creativebutton-result{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:2.0rem;margin-bottom:0.25rem}.creativebutton-result__normalbutton{display:inline-block;font-size:16px;padding:5px 10px;text-align:center;background:rgba(255,255,255,0.3);font-family:Arial, sans-serif;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}.creativebutton-result__hoverbutton{display:inline-block;font-size:16px;padding:5px 10px;text-align:center;background:rgba(255,255,255,0.3);font-family:Arial, sans-serif;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}.creativebutton-result__pressedbutton{display:inline-block;font-size:16px;padding:5px 10px;text-align:center;background:rgba(255,255,255,0.3);font-family:Arial, sans-serif;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}

О проекте

Описание

Генератор CSS кнопок с настраиваемыми стилями, тенями, границами и анимациями

Лицензия

GPL-3.0

Технологии

PHP JavaScript CSS HTML