Skip to content
Snippets Groups Projects
Commit 50ed3f0d authored by ERKEN EFE's avatar ERKEN EFE
Browse files

:sparkles: NEW: Add new button look

Added new uniform look to the navbar buttons and links.
parent 693236e8
No related merge requests found
......@@ -40,8 +40,29 @@ print {
}
}
section#header-buttons {
height: 52px;
}
body header div #header-buttons button {
padding: 10px;
/* padding: 10px; */
padding: 15px;
text-align: center;
text-decoration: none;
border-radius: 20px;
background-color: black;
color: orange;
border: none;
font-weight: bold;
}
body header div #header-buttons button:hover {
border-bottom: 3px solid orange;
}
body header div #header-buttons button:active {
border-bottom: 6px solid orange;
border-radius: 30px;
}
body header div #header-buttons button:last-child {
......@@ -52,12 +73,26 @@ body header div #header-buttons button:not(:nth-last-child(-n + 2)) {
margin-right: 10px;
}
body header nav {
margin-top: 20px;
width: 100%;
}
@media screen and (min-width: 768px),
print {
body header nav {
margin: 0px;
width: auto;
}
}
body header nav ul {
list-style-type: none;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 3px solid black;
}
@media screen and (min-width: 768px),
......@@ -65,11 +100,12 @@ print {
body header nav ul {
flex-direction: row;
padding-left: 20px;
border-bottom: 0px;
}
}
body header nav ul li {
padding-bottom: 10px;
padding-bottom: 35px;
}
@media screen and (min-width: 768px),
......@@ -83,6 +119,25 @@ print {
}
}
body header nav ul li a {
padding: 15px;
text-decoration: none;
border-radius: 20px;
background-color: black;
color: orange;
font-weight: bold;
}
body header nav ul li a:hover {
border-bottom: 3px solid orange;
}
body header nav ul li a:active {
border-bottom: 6px solid orange;
border-radius: 30px;
}
body main>header {
display: flex;
justify-content: center;
......@@ -140,6 +195,13 @@ body>footer nav ul {
padding-bottom: 5px;
}
@media screen and (min-width: 768px),
print {
body>footer nav ul {
padding: 0px;
}
}
body>footer nav ul li:not(:last-child) {
padding-bottom: 10px;
}
......@@ -160,3 +222,19 @@ print {
padding-right: 50px;
}
}
.social-media ul li a:link {
color: black;
}
.social-media ul li a:visited {
color: black;
}
.social-media ul li a:hover {
color: orange;
}
.social-media ul li a:active {
color: red;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment