92 lines
1.7 KiB
Vue
92 lines
1.7 KiB
Vue
|
<script setup>
|
||
|
|
const vm = getCurrentInstance()
|
||
|
|
const buyNowUrl = ref(vm?.appContext.config.globalProperties.buyNowUrl || 'https://1.envato.market/vuexy_admin')
|
||
|
|
|
||
|
|
watch(buyNowUrl, val => {
|
||
|
|
if (vm)
|
||
|
|
vm.appContext.config.globalProperties.buyNowUrl = val
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a
|
||
|
|
class="buy-now-button d-print-none"
|
||
|
|
role="button"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
:href="buyNowUrl"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
Buy Now
|
||
|
|
<span class="button-inner" />
|
||
|
|
</a>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.buy-now-button,
|
||
|
|
.button-inner {
|
||
|
|
display: inline-flex;
|
||
|
|
box-sizing: border-box;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 6px;
|
||
|
|
margin: 0;
|
||
|
|
animation: anime 12s linear infinite;
|
||
|
|
appearance: none;
|
||
|
|
background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
|
||
|
|
background-size: 600%;
|
||
|
|
color: rgba(255, 255, 255, 90%);
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.9375rem;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.43px;
|
||
|
|
line-height: 1.2;
|
||
|
|
min-inline-size: 50px;
|
||
|
|
outline: 0;
|
||
|
|
padding-block: 0.625rem;
|
||
|
|
padding-inline: 1.25rem;
|
||
|
|
text-decoration: none;
|
||
|
|
text-transform: none;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buy-now-button {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 999;
|
||
|
|
inset-block-end: 5%;
|
||
|
|
inset-inline-end: 87px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: white;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-inner {
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
filter: blur(12px);
|
||
|
|
inset: 0;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 200ms ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:not(:hover) .button-inner {
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes anime {
|
||
|
|
0% {
|
||
|
|
background-position: 0% 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
background-position: 100% 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0% 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|