Add send button

DidiSkywalker · Jun 21, 2022 · 116e59a · 116e59a · vercel · Jun 21, 2022
1 parent 7a057cc
commit 116e59a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -27,6 +27,21 @@
             type="text"
             id="textinput"
           />
+          <button class="enter" type="submit">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+              />
+            </svg>
+          </button>
         </form>
       </div>
     </div>

diff --git a/style.css b/style.css
@@ -77,6 +77,7 @@ body {
 #inputform {
   display: flex;
   flex-direction: row;
+  align-items: center;
   flex-grow: 1;
   padding-left: 20px;
   padding-right: 20px;
@@ -94,6 +95,31 @@ input {
   font-size: large;
 }
 
+input:focus {
+  outline: none;
+}
+
+.enter {
+  border: none;
+  background: none;
+  height: 3rem;
+  width: 3rem;
+  margin-left: 10px;
+  background-color: #a51e37;
+  border-radius: 50px;
+  color: white;
+  transform: rotate(90deg);
+  aspect-ratio: 1;
+  padding: 8px;
+  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2);
+}
+
+.enter:hover {
+  background-color: #c92d49;
+  transform: rotate(90deg) scale(1.05);
+  cursor: pointer;
+}
+
 .replaycontainer {
   display: flex;
   justify-content: center;