{"html":"

\n \n

Teenage Engineering [EP-133 K.O. II] - Buttons

\n","css":"/* Teenage Engineering [EP-133 K.O. II] - Buttons */\n\n.main {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n row-gap: 1.25em;\n}\n\n.buttons {\n display: flex;\n flex-direction: column;\n row-gap: 1.5em;\n}\n.button_pair {\n display: flex;\n column-gap: 1.5em;\n}\n.button_pair1 {\n display: flex;\n flex-direction: column;\n row-gap: 0.9em;\n}\n\n.btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 5em;\n height: 5em;\n background-color: #171717;\n border-radius: 5px;\n}\n\n.button1 {\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #c7c3c0;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,\n #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n.button2 {\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #c7c3c0;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,\n #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n.svg1 {\n fill: #5f5f5f;\n width: 25px;\n height: 25px;\n transition: 0.1s ease-in-out;\n}\n.svg2 {\n fill: #5f5f5f;\n width: 25px;\n height: 25px;\n transition: 0.1s ease-in-out;\n}\n\n.button3 {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #d42a02;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px, #fb702c 2px 2px 10px 0px inset,\n #d42a02 -4px -4px 1px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n.button4 {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #545251;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,\n #a8a6a4 1.5px 1.5px 1px 0px inset, #545251 -3.2px -3.2px 8px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n\n.button_text {\n color: white;\n padding-top: 0.9em;\n letter-spacing: 0.075em;\n font-size: 0.85em;\n transition: 0.1s ease-in-out;\n}\n\n.text {\n font-family: Montserrat;\n text-align: center;\n font-size: 0.65em;\n}\n\n.button1:active,\n.button2:active {\n box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,\n #c7c3c0 -3.2px -3.2px 8px 0px inset;\n}\n.button1:active .svg1,\n.button2:active .svg2 {\n scale: 0.95;\n}\n.button3:active {\n box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,\n #d42a02 -3.2px -3.2px 8px 0px inset;\n}\n.button3:active .button_text {\n transform: translateY(0.5px);\n}\n.button4:active {\n box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,\n #545251 -3.2px -3.2px 8px 0px inset;\n}\n.button4:active .button_text {\n transform: translateY(0.5px);\n}\n"}

average-swan-99

👁 实时预览

📝 源代码