60 lines
No EOL
976 B
Vue
60 lines
No EOL
976 B
Vue
<template>
|
|
<button
|
|
class="py-5 px-8 md:px-15 font-fat text-4xl text-white md:text-5xl rounded<md shadow-lg text-center border-none cursor-pointer"
|
|
:class="$style.root"
|
|
:disabled="disabled"
|
|
>
|
|
<slot/>
|
|
</button>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
.root {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("../assets/noise.png") repeat;
|
|
opacity: 20%;
|
|
|
|
transition: 200ms ease opacity;
|
|
}
|
|
|
|
&::after {
|
|
background: linear-gradient(to bottom, #1c1c1e, #0f0f0f);
|
|
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
opacity: 0;
|
|
transition: 500ms ease opacity;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
|
|
&::after {
|
|
opacity: 70%;
|
|
}
|
|
}
|
|
|
|
&:not(:disabled):hover::before {
|
|
opacity: 60%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
disabled: Boolean
|
|
})
|
|
</script> |