CreativeButton

root / css / BorderDialog.min.css

BorderDialog.min.css

4.7 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}.borderdialog-section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.borderdialog-section__button{margin-left:0.25rem}#borderdialog-section__label_color{min-width:unset}#borderdialog-section__prefix_r,#borderdialog-section__prefix_g,#borderdialog-section__prefix_b,#borderdialog-section__prefix_a{padding:0 0.25rem}.borderdialog-section__button{width:unset}.borderdialog-optionblock{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0.25rem 0}.borderdialog-optionblock__label{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:0 0.25rem;min-width:7.5rem}.borderdialog-optionblock__range{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:0.15rem;margin:0 0.25rem}.borderdialog-optionblock__field{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:2.0rem;width:3rem;border:solid 2px rgba(255,255,255,0.3);margin:0 0.25rem}.borderdialog-optionblock__button{height:0.8rem;width:0.8rem;font-size:0.7rem;margin:0 0.25rem}.borderdialog-optionblock__button::after{left:-35% !important}.borderdialog-rgbacodeblock{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:center;align-content:center;margin:0.25rem}.borderdialog-rgbacodeblock__label{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:1.6rem}.borderdialog-rgbacodeblock__prefix{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:2.0rem;background:rgba(255,255,255,0.3);border:solid 2px rgba(255,255,255,0.3);padding:0 0.5rem;margin:0 0.25rem}.borderdialog-rgbacodeblock__rgba{width:1.8rem;font-family:'Montserrat', sans-serif;font-size:1rem;color:#fff;padding-left:0.25rem;background:rgba(255,255,255,0);border:none}.borderdialog-rgbacodeblock__resultcolor{display:inline-block;position:relative;width:2.0rem;height:2.0rem;background-image:linear-gradient(45deg, gray 25%, transparent 25%),linear-gradient(-45deg, gray 25%, transparent 25%),linear-gradient(45deg, transparent 75%, gray 75%),linear-gradient(-45deg, transparent 75%, gray 75%);background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px;border:solid 2px rgba(255,255,255,0.3);-webkit-transition:all 0.3s;transition:all 0.3s;margin:0 0.25rem}.borderdialog-rgbacodeblock__resultcolor:before{display:block;background:red;content:"";border:solid 2px rgba(255,255,255,0.3);border-radius:3px;height:100%;width:100%;position:absolute;top:-2px;left:-2px}.borderdialog-rgbacodeblock__resultcolor:hover{border:solid 2px rgba(255,255,255,0.3);-webkit-transform:scale(0.9);transform:scale(0.9)}.borderdialog-rgbacodeblock__resultcolor:active{border:solid 2px rgba(255,255,255,0.9);-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)}.borderdialog-codeblock__panel{display:inline-block;background:rgba(255,255,255,0.1);border-radius:5px;margin:0.25rem 0.25rem 0.3rem 0.25rem}.borderdialog-codeblock__codetab{display:inline-block;margin-left:2rem;padding:0.5rem;background:#233463}.borderdialog-codeblock__copy{display:inline-block;float:right;height:1.0rem;font-size:0.8rem;padding:0.59rem;border-top-right-radius:5px;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}.borderdialog-codeblock__copy:hover{background:rgba(255,255,255,0.3)}.borderdialog-codeblock__copy:active{background:rgba(0,0,0,0.3)}.borderdialog-codeblock__codearea{display:-webkit-box;display:-ms-flexbox;display:flex;padding-top:0.25rem;padding-bottom:0.5rem;font-family:monospace;font-size:1.2em;overflow:scroll;-ms-overflow-style:none;scrollbar-width:none;height:4.5rem;background:#233463;border-radius:0 0 5px 5px}.borderdialog-codeblock__codearea::-webkit-scrollbar{display:none}.borderdialog-codeblock__linenumbers{line-height:1.5rem;padding:0.25rem 0.75rem;white-space:pre-wrap}.borderdialog-codeblock__code{line-height:1.5rem;padding:0.25rem 0;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:pre-wrap}.borderdialog-codeblock__code>*{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}

О проекте

Описание

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

Лицензия

GPL-3.0

Технологии

PHP JavaScript CSS HTML