This is fixed floating action button.
- From CDN:
<link rel="stylesheet" href="https://unpkg.com/@agilie/[email protected]/main.css">
<script src="https://unpkg.com/@agilie/[email protected]/index.js"></script>
- From Git Repository:
$ git clone https://github.com/agilie/action-button.git
- From NPM:
$ npm install @agilie/action-button
- From CDN:
<head>
<link rel="stylesheet" href="https://unpkg.com/@agilie/[email protected]/main.css">
<script src="https://unpkg.com/@agilie/[email protected]/index.js"></script>
</head>
<body>
<div class="wrap" id="js-btn-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
var elemsWrap = document.getElementById('js-btn-wrap');
var actionBtn = new ActionBtn(elemsWrap);
- From Git Repository:
<head>
<link rel="stylesheet" href="AddButton/main.css">
<script src="AddButton/index.js"></script>
</head>
<body>
<div class="wrap" id="js-btn-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
var elemsWrap = document.getElementById('js-btn-wrap');
var actionBtn = new ActionBtn(elemsWrap);
- From NPM: import our package from your module bundler (webpack)
var actionBtn = require('@agilie/action-button');
<div class="addBtn__wrapper" style="width: 80px; height: 80px;">
<div class="wrap addBtn__wrap" id="js-btn-wrap" style="width: auto; height: auto;">
<button class="addBtn addBtn--close" type="button" style="width: 80px; height: 80px; background-color: rgb(249, 180, 120); animation-iteration-count: 3;"></button>
<div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(117, 174, 253); transition-delay: 0s; transition-duration: 0.8s; transform: translate(0px);"></div>
<div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(247, 113, 109); transition-delay: 0.5s; transition-duration: 0.8s; transform: translate(0px);"></div>
<div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(251, 213, 112); transition-delay: 1s; transition-duration: 0.8s; transform: translate(0px);"></div>
</div>
</div>
<div class="wrap" id="js-btn-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script type="text/javascript">
var elemsContainer = document.getElementById('js-btn-wrap');
var instances = new ActionBtn(elemsContainer);
</script>
If you have any questions, suggestions or just need a help with web or mobile development, please email us at [email protected]. You can ask us anything from basic to complex questions.
We will continue publishing new open-source projects. Stay with us, more updates will follow!