#e8e8e8
1/* From uiverse.io by @satyamchaudharydev */ 2/* this button is inspired by -- whatsapp input */ 3/* == type to see fully interactive and click the close buttom to remove the text == */ 4 5.form { 6 --input-bg: #FFf; 7 /* background of input */ 8 --padding: 1.5em; 9 --rotate: 80deg; 10 /* rotation degree of input*/ 11 --gap: 2em; 12 /* gap of items in input */ 13 --icon-change-color: #15A986; 14 /* when rotating changed icon color */ 15 --height: 40px; 16 /* height */ 17 width: 200px; 18 padding-inline-end: 1em; 19 /* change this for padding in the end of input */ 20 background: var(--input-bg); 21 position: relative; 22 border-radius: 4px; 23} 24 25.form label { 26 display: flex; 27 align-items: center; 28 width: 100%; 29 height: var(--height); 30} 31 32.form input { 33 width: 100%; 34 padding-inline-start: calc(var(--padding) + var(--gap)); 35 outline: none; 36 background: none; 37 border: 0; 38} 39/* style for both icons -- search,close */ 40.form svg { 41 /* display: block; */ 42 color: #111; 43 transition: 0.3s cubic-bezier(.4,0,.2,1); 44 position: absolute; 45 height: 15px; 46} 47/* search icon */ 48.icon { 49 position: absolute; 50 left: var(--padding); 51 transition: 0.3s cubic-bezier(.4,0,.2,1); 52 display: flex; 53 justify-content: center; 54 align-items: center; 55} 56/* arrow-icon*/ 57.swap-off { 58 transform: rotate(-80deg); 59 opacity: 0; 60 visibility: hidden; 61} 62/* close button */ 63.close-btn { 64 /* removing default bg of button */ 65 background: none; 66 border: none; 67 right: calc(var(--padding) - var(--gap)); 68 box-sizing: border-box; 69 display: flex; 70 align-items: center; 71 justify-content: center; 72 color: #111; 73 padding: 0.1em; 74 width: 20px; 75 height: 20px; 76 border-radius: 50%; 77 transition: 0.3s; 78 opacity: 0; 79 transform: scale(0); 80 visibility: hidden; 81} 82 83.form input:focus ~ .icon { 84 transform: rotate(var(--rotate)) scale(1.3); 85} 86 87.form input:focus ~ .icon .swap-off { 88 opacity: 1; 89 transform: rotate(-80deg); 90 visibility: visible; 91 color: var(--icon-change-color); 92} 93 94.form input:focus ~ .icon .swap-on { 95 opacity: 0; 96 visibility: visible; 97} 98 99.form input:valid ~ .icon { 100 transform: scale(1.3) rotate(var(--rotate)) 101} 102 103.form input:valid ~ .icon .swap-off { 104 opacity: 1; 105 visibility: visible; 106 color: var(--icon-change-color); 107} 108 109.form input:valid ~ .icon .swap-on { 110 opacity: 0; 111 visibility: visible; 112} 113 114.form input:valid ~ .close-btn { 115 opacity: 1; 116 visibility: visible; 117 transform: scale(1); 118 transition: 0s; 119} 120
Comments
2josevitor555 11. August at 21:05
11. August at 21:05
cool man
satyamchaudharydev 20. August at 9:47
20. August at 9:47
@josevitor555 Thanks
MIT License