SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add LinkButton component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-03-27 23:45:51 +02:00
parent 20c7a512ed
commit 2382405651
1 changed files with 49 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/LinkButton.vue Normal file
View file

@ -0,0 +1,49 @@
<script setup lang="ts">
interface Props {
href?: string;
download?: boolean | any;
}
defineProps<Props>();
</script>
<template>
<a class="link-button" :href="href" :[download]="download">
<slot></slot>
</a>
</template>
<style lang="scss">
.link-button {
display: block;
position: relative;
top: 0;
background-color: var(--color-button);
color: var(--color-button-text);
font-weight: 700;
text-decoration: none;
text-align: center;
margin: 0.5rem 0;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
box-shadow: 0 0.5rem 0 0 var(--color-button-box-shadow);
transition: all 0.1s ease-out;
&:hover {
cursor: pointer;
top: -0.25rem;
box-shadow: 0 0.75rem 0 0 var(--color-button-box-shadow);
}
&:active {
top: 0.25rem;
box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
}
}
</style>