Button Design fix

CybersecurityLuxembourg · May 31, 2024 · 93a4532 · 93a4532
1 parent 5cd1add
commit 93a4532
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/component/bar/Menu.css b/src/component/bar/Menu.css
@@ -217,6 +217,27 @@
  .Menu .top-right-bar .immediate {
  margin: 16px auto;
  width: fit-content;
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ flex-direction: row;
+ align-items: center;
+
+ padding: 16px 24px;
+ gap: 19px;
+ position: relative;
+ font-size: 16px;
+ line-height: 150%;
+ color: var(--text-neutral-0);
+
+ background: var(--accent-blue);
+ border: 1px solid var(--accent-blue) --primary-blue-100;
+
+ /* Button drop shadow */
+
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
+ border-radius: 200px;
  }
 
  .Menu .split-bar {

diff --git a/src/component/bar/Menu.jsx b/src/component/bar/Menu.jsx
@@ -305,11 +305,10 @@ export default class Menu extends React.Component {
 
  <div className="separator"/>
  <div className="split-bar"/>
-
- <a className="red small immediate"
- href="/support"
- >
- IMMEDIATE SUPPORT
+ <a href="/support">
+ <button className="red small">
+ IMMEDIATE SUPPORT
+ </button>
  </a>
  </Nav>
  </Navbar.Collapse>