{"html":"","css":"/* From uiverse.io by @satyamchaudharydev */\n/* this button is inspired by -- whatsapp input */\n/* == type to see fully interactive and click the close buttom to remove the text == */\n\n.form {\n --input-bg: #FFf;\n /* background of input */\n --padding: 1.5em;\n --rotate: 80deg;\n /* rotation degree of input*/\n --gap: 2em;\n /* gap of items in input */\n --icon-change-color: #15A986;\n /* when rotating changed icon color */\n --height: 40px;\n /* height */\n width: 200px;\n padding-inline-end: 1em;\n /* change this for padding in the end of input */\n background: var(--input-bg);\n position: relative;\n border-radius: 4px;\n}\n\n.form label {\n display: flex;\n align-items: center;\n width: 100%;\n height: var(--height);\n}\n\n.form input {\n width: 100%;\n padding-inline-start: calc(var(--padding) + var(--gap));\n outline: none;\n background: none;\n border: 0;\n}\n/* style for both icons -- search,close */\n.form svg {\n /* display: block; */\n color: #111;\n transition: 0.3s cubic-bezier(.4,0,.2,1);\n position: absolute;\n height: 15px;\n}\n/* search icon */\n.icon {\n position: absolute;\n left: var(--padding);\n transition: 0.3s cubic-bezier(.4,0,.2,1);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n/* arrow-icon*/\n.swap-off {\n transform: rotate(-80deg);\n opacity: 0;\n visibility: hidden;\n}\n/* close button */\n.close-btn {\n /* removing default bg of button */\n background: none;\n border: none;\n right: calc(var(--padding) - var(--gap));\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #111;\n padding: 0.1em;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n transition: 0.3s;\n opacity: 0;\n transform: scale(0);\n visibility: hidden;\n}\n\n.form input:focus ~ .icon {\n transform: rotate(var(--rotate)) scale(1.3);\n}\n\n.form input:focus ~ .icon .swap-off {\n opacity: 1;\n transform: rotate(-80deg);\n visibility: visible;\n color: var(--icon-change-color);\n}\n\n.form input:focus ~ .icon .swap-on {\n opacity: 0;\n visibility: visible;\n}\n\n.form input:valid ~ .icon {\n transform: scale(1.3) rotate(var(--rotate))\n}\n\n.form input:valid ~ .icon .swap-off {\n opacity: 1;\n visibility: visible;\n color: var(--icon-change-color);\n}\n\n.form input:valid ~ .icon .swap-on {\n opacity: 0;\n visibility: visible;\n}\n\n.form input:valid ~ .close-btn {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n transition: 0s;\n}\n"}

slippery-parrot-22

👁 实时预览

📝 源代码