{"id":16064437,"url":"https://github.com/knowankit/hoveron","last_synced_at":"2025-06-12T18:09:10.805Z","repository":{"id":57266960,"uuid":"181349256","full_name":"knowankit/hoveron","owner":"knowankit","description":"🎨 A CSS file to animate buttons on hover","archived":false,"fork":false,"pushed_at":"2020-02-28T18:02:40.000Z","size":1010,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-31T08:58:23.149Z","etag":null,"topics":["animations","bootstrap","css","hover","hover-effects"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/knowankit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-14T18:08:04.000Z","updated_at":"2024-03-07T05:27:00.000Z","dependencies_parsed_at":"2022-08-25T02:51:41.032Z","dependency_job_id":null,"html_url":"https://github.com/knowankit/hoveron","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/knowankit/hoveron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fhoveron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fhoveron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fhoveron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fhoveron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knowankit","download_url":"https://codeload.github.com/knowankit/hoveron/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fhoveron/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259518831,"owners_count":22870304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","bootstrap","css","hover","hover-effects"],"created_at":"2024-10-09T05:07:47.228Z","updated_at":"2025-06-12T18:09:10.774Z","avatar_url":"https://github.com/knowankit.png","language":"CSS","readme":"# Hover-on.css ![npm](https://img.shields.io/npm/v/hover-on.svg)  ![npm bundle size](https://img.shields.io/bundlephobia/min/hover-on.svg)\n**Bootstrap** button classes are supported, pure css animation\n \n`hover-on.css` has creative animations and transitions for your projects. It's great to make your buttons look awesome.\n\n\n![Hover gif](https://github.com/knowankit/hoveron/blob/master/hover-gif.gif)\n\n\n\n## Installation\n### Install via npm:\n\n`$ npm install hover-on`\n\n## Usage\nTo use hover-on.css in your website, just add the stylesheet into your document's `\u003chead\u003e`, add the appropriate class to the button. That's it! You've got a animated button. Cool!\n\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"hover-on.css\"\u003e\n\u003c/head\u003e\n```\n\nor Import the `scss` file in your main sass file.\n\n```scss\n@import \"~hover-on/source/hover-on.scss\";\n```\n\nor use a CDN version by [jsDelivr](https://cdn.jsdelivr.net/npm/hover-on/hover-on.css)\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/hover-on/hover-on.css\"\u003e\n\u003c/head\u003e\n```\n\n## Animations\n\n| Class Name       |                    |                 |\n| --------------   |:-----------------: | --------------: |\n| `both-line`      | `bottom-line`      | `top-line`      |\n| `fill-left`      | `fill-right`       | `fill-top`      |\n| `fill-bottom`    | `fill-both`        | `fill-both2`    |\n| `fill-skew-left` | `fill-skew-right`  | `shine`         |\n| `grow`           | `shrink`           | `pulse`         |\n| `pulse-grow`     | `pulse-shrink`     | `push`          |\n| `pop`            | `bounce-in`        | `bounce-out`    |\n| `rotate`         | `rotate-grow`      | `float`         |\n| `sink`           | `bob`              | `hang`          | \n| `skew`           | `wobble-skew`      | `forward`       | \n| `backward`       | `shadow`           |                 | \n\nFor example:\n\n```html\n\u003cbutton class=\"btn fill-bottom-warning\"\u003eWarning\u003c/button\u003e\n```\nIn the above example `btn` is from bootstrap classes and `fill-bottom-warning` is from the hover-on.\n\n**Important!** It's necessary to suffix the class name with bootstrap color name like `fill-both-primary`. You don't need to add any suffix in 2d animation classes which are `pop`, `push`, `float` etc.\n## Demo\n\n[Click here](https://hover.knowankit.com/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowankit%2Fhoveron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknowankit%2Fhoveron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowankit%2Fhoveron/lists"}