This post is saved as a draft.
#212121
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 padding-left: 2em; 6 padding-right: 2em; 7 padding-bottom: 0.4em; 8 background-color: #171717; 9 border-radius: 20px; 10} 11 12#heading { 13 text-align: center; 14 margin: 2em; 15 color: rgb(0, 255, 200); 16 font-size: 1.2em; 17} 18 19.field { 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 gap: 0.5em; 24 border-radius: 25px; 25 padding: 0.6em; 26 border: none; 27 outline: none; 28 color: white; 29 background-color: #171717; 30 box-shadow: inset 2px 5px 10px rgb(5, 5, 5); 31} 32 33.input-icon { 34 height: 1.3em; 35 width: 1.3em; 36 fill: rgb(0, 255, 200); 37} 38 39.input-field { 40 background: none; 41 border: none; 42 outline: none; 43 width: 100%; 44 color: rgb(0, 255, 200); 45} 46 47.form .btn { 48 display: flex; 49 justify-content: center; 50 flex-direction: row; 51 margin-top: 2.5em; 52} 53 54.button1 { 55 padding: 0.5em; 56 padding-left: 1.1em; 57 padding-right: 1.1em; 58 border-radius: 5px; 59 margin-right: 0.5em; 60 border: none; 61 outline: none; 62 transition: .4s ease-in-out; 63 background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%); 64 color: rgb(0, 0, 0); 65} 66 67.button1:hover { 68 background-image: linear-gradient(163deg, #00642f 0%, #13034b 100%); 69 color: rgb(0, 255, 200); 70} 71 72.button2 { 73 padding: 0.5em; 74 padding-left: 2.3em; 75 padding-right: 2.3em; 76 border-radius: 5px; 77 border: none; 78 outline: none; 79 transition: .4s ease-in-out; 80 background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%); 81 color: rgb(0, 0, 0); 82} 83 84.button2:hover { 85 background-image: linear-gradient(163deg, #00642f 0%, #13034b 100%); 86 color: rgb(0, 255, 200); 87} 88 89.button3 { 90 margin-bottom: 3em; 91 padding: 0.5em; 92 border-radius: 5px; 93 border: none; 94 outline: none; 95 transition: .4s ease-in-out; 96 background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%); 97 color: rgb(0, 0, 0); 98} 99 100.button3:hover { 101 background-image: linear-gradient(163deg, #a00000fa 0%, #d10050 100%); 102 color: rgb(255, 255, 255); 103} 104 105.card { 106 background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%); 107 border-radius: 22px; 108 transition: all .3s; 109} 110 111.card2 { 112 border-radius: 0; 113 transition: all .2s; 114} 115 116.card2:hover { 117 transform: scale(0.98); 118 border-radius: 20px; 119} 120 121.card:hover { 122 box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30); 123}
Variation of aform
Variation of aform