Fix buttons sizes

This commit is contained in:
2021-09-30 22:49:04 +02:00
parent 4df4b0dfa0
commit 624f02d84d
2 changed files with 16 additions and 6 deletions

View File

@@ -24,7 +24,7 @@
<section class="homepage__intro"> <section class="homepage__intro">
<h1 class="title-huge">Houses</h1> <h1 class="title-huge">Houses</h1>
<p class="text-medium">Houses Of is a project that showcases houses of character around the world.</p> <p class="text-medium">Houses Of is a project that showcases houses of character around the world.</p>
<Button text="Explore locations" url="#" tag="a"> <Button text="Explore locations" url="#">
<img src="/images/icons/globe.svg" alt="explore globe"> <img src="/images/icons/globe.svg" alt="explore globe">
</Button> </Button>
</section> </section>

View File

@@ -1,14 +1,16 @@
.button { .button {
display: inline-flex; display: inline-flex;
height: 48px;
align-items: center; align-items: center;
background: #fff; background: #fff;
border-radius: 100vh; padding: 0 24px;
padding: 12px 24px;
text-decoration: none;
font-size: rem(18px);
color: $color-text; color: $color-text;
font-weight: 600; font-size: rem(18px);
line-height: 1;
font-weight: 700;
border-radius: 100vh;
border: none; border: none;
text-decoration: none;
// Icon // Icon
img { img {
@@ -16,6 +18,14 @@
margin-right: 12px; margin-right: 12px;
} }
// Size variants
// Small
&--small {
height: 40px;
}
// Color Variants
// Pink
&--pink { &--pink {
background: $color-secondary-light; background: $color-secondary-light;
} }