feat: [#90] add main buttons component

Author: cd-bash

src/components/cd-cover/index.ts

@@ -0,0 +1,22 @@
+import './styles.css';
+
+export type MainButtonOptions = {
+    text: string;
+    path: string;
+    styleType: 'primary' | 'secondary';
+};
+
+// --------------------------------------------------------------------------------
+
+export function createMainButton(options: MainButtonOptions) {
+    const { text, path, styleType } = options;
+    
+    const button = document.createElement('a');
+    button.className = `main-button ${styleType}`;
+    button.innerHTML = text;
+    button.href = path;
+    button.role = 'button';
+    
+    return button;
+}
+

src/components/cd-cover/styles.css

@@ -0,0 +1,48 @@
+.main-button {
+    display: inline-block;
+    min-width: 220px;
+    height: 40px;
+    
+    text-align: center;
+    line-height: 36px;
+    font-family: 'Handjet', sans-serif;
+    font-size: 1.4em;
+    text-transform: uppercase;
+    text-decoration: none;
+
+    border-radius: 20px;
+    border: 2px solid;
+
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    overflow: hidden;
+}
+
+.main-button.primary {
+    background-color: rgba(59, 255, 197, 0.05);
+    border-color: rgba(59, 255, 197, 1);
+    color: #ffffff;
+
+    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+
+    &:hover {
+        background-color: #34e6c0;
+        border-color: #34e6c0;
+        cursor: pointer;
+    }
+}
+
+.main-button.secondary {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+
+    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+
+    &:hover {
+        background-color: rgba(255, 255, 255, 1);
+        border-color: #ffffff;
+        color: #000000;
+        cursor: pointer;
+    }
+}