npm i vue-github-button
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<template> <div id="app" class="button-container"> <github-button href="https://github.com/gauti123456" aria-label="Follow @gauti123456 on GitHub" > Follow @gauti123456 </github-button> <github-button href="https://github.com/gauti123456/vue2project" data-icon="octicon-star" aria-label="Star vue-github-button on GitHub" > Star </github-button> <github-button href="https://github.com/gauti123456/vue-github-button/fork" data-icon="octicon-repo-forked" aria-label="Fork vue-github-button on GitHub" > Fork </github-button> <github-button href="https://github.com/sponsors/gauti123456" aria-label="Sponsor @gauti123456 on GitHub" > Sponsor </github-button> <github-button href="https://github.com/gauti123456/vue2project/issues" data-icon="octicon-issue-opened" aria-label="Issue vue-github-button on GitHub" > Issue </github-button> </div> </template> <script> import GithubButton from "vue-github-button"; export default { components: { GithubButton, }, }; </script> <style> #app { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #f9f9f9; font-family: Arial, sans-serif; } .button-container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem; } github-button { display: flex; justify-content: center; align-items: center; padding: 0.5rem 1rem; border-radius: 5px; background-color: #0366d6; color: white; text-decoration: none; font-weight: bold; transition: transform 0.2s ease, background-color 0.2s ease; } github-button:hover { transform: scale(1.05); background-color: #024c99; } github-button:active { transform: scale(0.95); } </style> |
