<div class="p-5">
<div class="mb-5">
<a class="btn btn-primary" target="" href="/">Primary button</a>
</div>
<div class="mb-5">
<a class="btn btn-primary external" target="" href="/">Primary external button</a>
</div>
<div class="mb-5">
<a class="btn btn-secondary" target="" href="/">Secondary button</a>
</div>
<div class="mb-5">
<a class="btn btn-tertiary" target="" href="/">Tertiary button</a>
</div>
</div>
<div class="p-5">
{{#if buttons}}
{{#each buttons}}
<div class="mb-5">
<a class="{{ class }}" target="" href="{{ url }}">{{ text }}</a>
</div>
{{/each}}
{{/if}}
</div>
{
"buttons": [
{
"name": "Primary",
"text": "Primary button",
"class": "btn btn-primary",
"url": "/"
},
{
"name": "Primary external",
"text": "Primary external button",
"class": "btn btn-primary external",
"url": "/"
},
{
"name": "Secondary",
"text": "Secondary button",
"class": "btn btn-secondary",
"url": "/"
},
{
"name": "Tertiary",
"text": "Tertiary button",
"class": "btn btn-tertiary",
"url": "/"
}
]
}
// buttons
a, button, input{
&.btn{
&.btn-primary{
color: $white;
background-color: $pink;
border: 1px solid $pink;
font-size: 1.5rem;
font-family: $boldfont;
font-weight: 700;
text-transform: uppercase;
padding: 0.8rem 4rem 0.6rem 1.5rem;
border-radius: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0196 6.61874C14.3066 6.33176 14.3066 5.86648 14.0196 5.57951L9.34308 0.902968C9.0561 0.615993 8.59082 0.615993 8.30385 0.902968C8.01687 1.18994 8.01687 1.65522 8.30385 1.9422L12.4608 6.09912L8.30385 10.256C8.01687 10.543 8.01687 11.0083 8.30385 11.2953C8.59082 11.5822 9.0561 11.5822 9.34308 11.2953L14.0196 6.61874ZM0.5 6.09912L0.5 6.83397L13.5 6.83397V6.09912V5.36427L0.5 5.36427L0.5 6.09912Z' fill='white'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 15px;
background-position: right 1rem center;
&:hover{
background-color: $white;
color: $pink;
background-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0196 6.61874C14.3066 6.33176 14.3066 5.86648 14.0196 5.57951L9.34308 0.902968C9.0561 0.615993 8.59082 0.615993 8.30385 0.902968C8.01687 1.18994 8.01687 1.65522 8.30385 1.9422L12.4608 6.09912L8.30385 10.256C8.01687 10.543 8.01687 11.0083 8.30385 11.2953C8.59082 11.5822 9.0561 11.5822 9.34308 11.2953L14.0196 6.61874ZM0.5 6.09912L0.5 6.83397L13.5 6.83397V6.09912V5.36427L0.5 5.36427L0.5 6.09912Z' fill='%23E20074'/%3E%3C/svg%3E%0A");
}
&.external{
padding: 0.8rem 4.5rem 0.6rem 1.5rem;
background-position: right 1.5rem center;
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.95V15.55C12.75 15.8682 12.6251 16.1735 12.4028 16.3986C12.1805 16.6236 11.8788 16.75 11.5644 16.75H1.93557C1.62114 16.75 1.31958 16.6236 1.09724 16.3986C0.874907 16.1735 0.75 15.8682 0.75 15.55V5.95C0.75 5.63174 0.874907 5.32651 1.09724 5.10147C1.31958 4.87643 1.62114 4.75 1.93557 4.75H6.22938' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16.7969 0.75L8.76953 8.77734' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16.7969 7.78125V0.75H9.76562' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
&:hover{
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.95V15.55C12.75 15.8682 12.6251 16.1735 12.4028 16.3986C12.1805 16.6236 11.8788 16.75 11.5644 16.75H1.93557C1.62114 16.75 1.31958 16.6236 1.09724 16.3986C0.874907 16.1735 0.75 15.8682 0.75 15.55V5.95C0.75 5.63174 0.874907 5.32651 1.09724 5.10147C1.31958 4.87643 1.62114 4.75 1.93557 4.75H6.22938' stroke='%23E20074' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16.7969 0.75L8.76953 8.77734' stroke='%23E20074' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16.7969 7.78125V0.75H9.76562' stroke='%23E20074' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
}
}
&.btn-secondary{
color: $pink;
background-color: $white;
border: 1px solid $white;
font-size: 1.5rem;
font-family: $boldfont;
font-weight: 700;
text-transform: uppercase;
padding: 0.8rem 4rem 0.6rem 1.5rem;
border-radius: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0196 6.61874C14.3066 6.33176 14.3066 5.86648 14.0196 5.57951L9.34308 0.902968C9.0561 0.615993 8.59082 0.615993 8.30385 0.902968C8.01687 1.18994 8.01687 1.65522 8.30385 1.9422L12.4608 6.09912L8.30385 10.256C8.01687 10.543 8.01687 11.0083 8.30385 11.2953C8.59082 11.5822 9.0561 11.5822 9.34308 11.2953L14.0196 6.61874ZM0.5 6.09912L0.5 6.83397L13.5 6.83397V6.09912V5.36427L0.5 5.36427L0.5 6.09912Z' fill='%23E20074'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 15px;
background-position: right 1rem center;
&:hover{
background-color: $pink;
color: $white;
background-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0196 6.61874C14.3066 6.33176 14.3066 5.86648 14.0196 5.57951L9.34308 0.902968C9.0561 0.615993 8.59082 0.615993 8.30385 0.902968C8.01687 1.18994 8.01687 1.65522 8.30385 1.9422L12.4608 6.09912L8.30385 10.256C8.01687 10.543 8.01687 11.0083 8.30385 11.2953C8.59082 11.5822 9.0561 11.5822 9.34308 11.2953L14.0196 6.61874ZM0.5 6.09912L0.5 6.83397L13.5 6.83397V6.09912V5.36427L0.5 5.36427L0.5 6.09912Z' fill='white'/%3E%3C/svg%3E%0A");
}
}
&.btn-tertiary{
color: $white;
background-color: $pink;
border: 1px solid $pink;
font-size: 1.3rem;
font-family: $bodyfont;
font-weight: 700;
padding: 0.8rem 2rem 0.6rem 2rem;
border-radius: 20px;
&:hover{
border: 1px solid $white;
color: $white;
background-color: transparent;
}
}
&.btn-close{
background-image: none;
width: 30px;
height: 30px;
background-color: $pink;
position: relative;
&:before, &:after{
content: '';
position: absolute;
top: calc(50% - 1px);
left: 25%;
width: 50%;
height: 2px;
background-color: white;
}
&:before{
transform: rotate(45deg);
}
&:after{
transform: rotate(-45deg);
}
}
&.btn-open{
background-image: none;
width: 30px;
height: 30px;
background-color: $white;
position: relative;
&:before, &:after{
content: '';
position: absolute;
top: calc(50% - 1px);
left: 25%;
width: 50%;
height: 2px;
background-color: $black;
}
&:after{
transform: rotate(90deg);
}
}
&.btn-linkedin{
display: block;
width: 25px;
height: 25px;
background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4741 0.000244141H1.86363C0.847403 0.000244141 0 0.833935 0 1.83371V18.1754C0 19.1751 0.847403 20.0088 1.86363 20.0088H18.4741C19.4903 20.0088 20.3377 19.1751 20.3377 18.1754V1.83371C20.3377 0.833935 19.4903 0.000244141 18.4741 0.000244141ZM5.93182 16.6741H2.54221V7.50347H5.93182V16.6741ZM4.23702 6.41902C3.22079 6.41902 2.54221 5.75141 2.54221 4.91772C2.54221 4.00261 3.22079 3.33501 4.23702 3.33501C5.25324 3.33501 5.93182 4.00261 5.93182 4.8363C5.93182 5.75141 5.25324 6.41902 4.23702 6.41902ZM17.7955 16.6741H14.4059V11.6719C14.4059 10.3367 13.4724 10.0045 13.2208 10.0045C12.9659 10.0045 11.8636 10.1706 11.8636 11.6719C11.8636 11.838 11.8636 16.6741 11.8636 16.6741H8.47403V7.50347H11.8636V8.83867C12.3734 8.0864 13.2208 7.50347 14.8296 7.50347C16.4383 7.50347 17.7955 8.754 17.7955 11.6719V16.6741Z' fill='black'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: contain;
}
}
}
No notes defined.