show a span on tag hover to delete it maybe

src/elements/Tag/Tag.module.css

@@ -1,19 +1,37 @@
-.tagbtn {
+.btnnostyle {
-    background-color: #3574fe;
+    background: none;
+    color: inherit;
     border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+
+.tagbtnContainer {
+    background-color: #3574fe;
     border-radius: 10px;
     color: white;
     margin-left: 10px;
     margin-top: 15px;
+    width: 50px;
     /*font-weight: bold;*/
     padding: 5px 15px 5px 15px;
 }
 
-.tagbtn:focus {
+.tagbtnContainer:focus {
     background-color: #004eff;
     outline: none;
 }
 
-.tagbtn:hover {
+.tagbtnContainer:hover {
     background-color: #004eff;
 }
+
+.deletebtn{
+    display: none;
+}
+
+.tagbtnContainer:hover .deletebtn {
+    display: inline;
+}

src/elements/Tag/Tag.tsx

@@ -42,10 +42,13 @@ class Tag extends React.Component<props, state> {
 
     renderButton(): JSX.Element {
         return (
-            <button className={styles.tagbtn}
+            <span className={styles.tagbtnContainer}>
+                <button className={styles.btnnostyle}
                         onClick={(): void => this.TagClick()}
                         onContextMenu={this.contextmenu}
                         data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
+                <span className={styles.deletebtn}>X</span>
+            </span>
         );
     }