Skip to content

Instantly share code, notes, and snippets.

@hasinhayder

hasinhayder/App.vue

Created July 17, 2023 17:24
Show Gist options
  • Save hasinhayder/1ea479f7c8536415582492ce1ceaa96f to your computer and use it in GitHub Desktop.
Save hasinhayder/1ea479f7c8536415582492ce1ceaa96f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hasinhayder created this gist Jul 17, 2023.
    30 changes: 30 additions & 0 deletions App.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <script setup>
    const themeColor = '#FFA500'
    const style = {
    color: themeColor
    }
    const buttonStyle = {
    '--button-hover-color': themeColor
    }
    </script>

    <template>
    <section class="mx-auto container">
    <h2 class="text-2xl" :style="style">Hover Example</h2>

    <button class="mt-10 bg-blue-500 text-white font-bold py-2 px-4 rounded" :style="buttonStyle">
    Hover Button
    </button>
    </section>
    </template>

    <style scoped>
    button:hover{
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
    color:white;
    cursor:pointer
    }
    </style>