Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jancernik/floating-github-link
A stylesheet to display a floating button on any website
https://github.com/jancernik/floating-github-link
css jsdelivr vanilla-js
Last synced: 15 days ago
JSON representation
A stylesheet to display a floating button on any website
- Host: GitHub
- URL: https://github.com/jancernik/floating-github-link
- Owner: jancernik
- Created: 2022-02-27T20:44:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-22T19:28:44.000Z (about 2 years ago)
- Last Synced: 2024-10-10T03:21:17.427Z (about 1 month ago)
- Topics: css, jsdelivr, vanilla-js
- Language: CSS
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Floating GitHub Link
This is a stylesheet to display a floating button that redirects you to my GitHub page (or any other page).
>This was my old username.
## Features
The JS file checks if the necessary resources are already included, otherwise it will link them automatically. Therefore, I just need to include one script.
+ **White** or **Black** theme.
+ It lowers the opacity when the mouse hovers out to improve visibility.
+ External resources:
* "Font Awesome 6 Brands" icon library.
* "Source Sans Pro" Google font.
## Usage
- Include the following `` tag at the bottom of the HTML head:
```html
<script src="https://cdn.jsdelivr.net/gh/cernikkk/floating-github-link@main/github-link.js">
```
- Apply the style to an empty `` tag with `class="github-link"`.
- Select the color with `class="white-icon"` or `class="dark-icon"`. (If not specified, it will default to white.)
- As a bonus, it sets `target="_blank"` if not declared.
## See it in action!
These are some of my projects that include it:
- [tic-tac-toe](https://github.com/cernikkk/tic-tac-toe)
- [library](https://github.com/cernikkk/library)
***And that's all, I didn't end up using it much...***