styling of links

This commit is contained in:
nikurasu 2022-10-21 16:00:48 +02:00
parent dc527da736
commit 5175cb3150
3 changed files with 25 additions and 3 deletions

View file

@ -0,0 +1,2 @@
$no_alpha: #00000000;
$white: #FFFFFF;

View file

@ -1,3 +1,5 @@
@import "colors.scss";
body {
min-height: 100vh;
}
@ -26,8 +28,24 @@ body {
display: flex;
flex-direction: column;
gap: 1rem;
>a{
>button {
background-color: #000;
font-family: monospace;
font-size: 1rem;
font-weight: 600;
background-color: $no_alpha;
color: $white;
border: 4px solid $white;
width: 750px;
height: 3rem;
cursor: pointer;
transition: background-color .25s ease-in-out, color .25s ease-in-out;
&:hover {
background-color: $white;
color: #ff9601;
background-position: 2rem;
}
}
}
}

View file

@ -9,7 +9,9 @@
</div>
<div class="linkbox">
<% links.forEach(link => { %>
<a href="<%= link.hyperlink %>">
<button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
</a>
<% }) %>
</div>
</div>