20 lines
601 B
Vue
20 lines
601 B
Vue
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
(e: 'click'): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<button class="btn-play" @click="emit('click')">
|
|
<span class="sr-only">Play</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-play {
|
|
@apply relative w-[66px] h-[66px] bg-[image:var(--video-play)] bg-cover bg-center bg-no-repeat md:w-[100px] md:h-[100px]
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
|
|
hover:after:opacity-10;
|
|
}
|
|
</style>
|