vue-annoying-button

Annoying Submit Button in a Form using Vue.js

You won't be able to submit the form until you satisfy your own conditions. Enjoy playing with it. :)

---

✍️ Authors

👤 Ricardo Castanho

---

🫂 Show your support

Give a ⭐️ if you like this project and want to support it!

---

🛠️ Usage example

1. Install the project

pnpm install vue-annoying-button

2. Register the annoying plugin

// main.ts
import { createApp } from 'vue'
import AnnoyingPlugin from 'vue-annoying-button'

import App from './App.vue'

createApp(App)
  .use(AnnoyingPlugin)
  .mount('#app')

3. Use it on your components

// App.vue
<template>
  <header>
    <v-annoying-button :annoy="true" range="20vw" class="submit-button">
      Annoy me
    </v-annoying-button>
  </header>
</template>

<style scoped>
header {
  margin: auto;
  width: 50%;
}

.submit-button {
  margin-top: 1.75rem;
  background-color: hsla(160, 100%, 37%, 1);
  color: #fff;
  letter-spacing: 0.5px;
  padding: 0.85em 2.2em;
  border: none;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}
</style>

See demo for more examples

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b 'feature/AmazingFeature')
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Feel free to check the issues page.

📝 License

This project is under the MIT license.

---