#212121
1form { 2 background-color: #444444; 3 border-radius: 10px; 4 padding: 20px; 5 width: 300px; 6 margin: 50px auto; 7} 8 9.lb { 10 display: block; 11 margin-bottom: 10px; 12 font-size: 18px; 13 font-weight: bold; 14} 15 16.infos[type="text"], input[type="email"], input[type="date"] { 17 width: 100%; 18 padding: 10px; 19 font-size: 16px; 20 border-radius: 5px; 21 border: none; 22 margin-bottom: 20px; 23 background-color: #333333; 24 color: white; 25} 26 27#send { 28 --glow-color: rgb(176, 255, 189); 29 --glow-spread-color: rgba(123, 255, 160, 0.781); 30 --enhanced-glow-color: rgb(182, 175, 71); 31 --btn-color: rgba(13, 241, 21, 0.508); 32 border: .25em solid var(--glow-color); 33 padding: 1em 2em; 34 color: var(--glow-color); 35 font-size: 14px; 36 font-weight: bold; 37 background-color: var(--btn-color); 38 border-radius: 1em; 39 outline: none; 40 box-shadow: 0 0 1em .25em var(--glow-color), 41 0 0 4em 1em var(--glow-spread-color), 42 inset 0 0 .05em .25em var(--glow-color); 43 text-shadow: 0 0 .5em var(--glow-color); 44 position: relative; 45 transition: all 0.3s; 46} 47 48#send::after { 49 pointer-events: none; 50 content: ""; 51 position: absolute; 52 top: 120%; 53 left: 0; 54 height: 100%; 55 width: 100%; 56 background-color: var(--glow-spread-color); 57 filter: blur(2em); 58 opacity: .7; 59 transform: perspective(1.5em) rotateX(35deg) scale(1, .6); 60} 61 62#send:hover { 63 color: var(--btn-color); 64 background-color: var(--glow-color); 65 box-shadow: 0 0 1em .25em var(--glow-color), 66 0 0 4em 2em var(--glow-spread-color), 67 inset 0 0 .75em .25em var(--glow-color); 68} 69 70#send:active { 71 box-shadow: 0 0 0.6em .25em var(--glow-color), 72 0 0 2.5em 2em var(--glow-spread-color), 73 inset 0 0 .5em .25em var(--glow-color); 74} 75 76#limpar { 77 --glow-color: rgb(255, 176, 176); 78 --glow-spread-color: rgba(255, 123, 123, 0.781); 79 --enhanced-glow-color: rgb(182, 175, 71); 80 --btn-color: rgba(241, 13, 13, 0.508); 81 border: .25em solid var(--glow-color); 82 padding: 1em 2em; 83 color: var(--glow-color); 84 font-size: 14px; 85 font-weight: bold; 86 background-color: var(--btn-color); 87 border-radius: 1em; 88 outline: none; 89 box-shadow: 0 0 1em .25em var(--glow-color), 90 0 0 4em 1em var(--glow-spread-color), 91 inset 0 0 .05em .25em var(--glow-color); 92 text-shadow: 0 0 .5em var(--glow-color); 93 position: relative; 94 transition: all 0.3s; 95} 96 97#limpar::after { 98 pointer-events: none; 99 content: ""; 100 position: absolute; 101 top: 120%; 102 left: 0; 103 height: 100%; 104 width: 100%; 105 background-color: var(--glow-spread-color); 106 filter: blur(2em); 107 opacity: .7; 108 transform: perspective(1.5em) rotateX(35deg) scale(1, .6); 109} 110 111#limpar:hover { 112 color: var(--btn-color); 113 background-color: var(--glow-color); 114 box-shadow: 0 0 1em .25em var(--glow-color), 115 0 0 4em 2em var(--glow-spread-color), 116 inset 0 0 .75em .25em var(--glow-color); 117} 118 119#limpar:active { 120 box-shadow: 0 0 0.6em .25em var(--glow-color), 121 0 0 2.5em 2em var(--glow-spread-color), 122 inset 0 0 .5em .25em var(--glow-color); 123}
4.5K views
4.5K views
Comments
MIT License