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. :)

Click here to play with Annoying Submit Button

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

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

This project is under the MIT license.