├── preview.png ├── assets ├── js │ └── main.js ├── css │ └── styles.css └── scss │ └── styles.scss ├── README.md └── index.html /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/floating-action-menu/HEAD/preview.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW & HIDE MENU ===============*/ 2 | const toggleButton = document.getElementById('floating-toggle') 3 | 4 | const activeMenu = () =>{ 5 | toggleButton.classList.toggle('active') 6 | } 7 | 8 | toggleButton.addEventListener('click', activeMenu) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Floating Action Menu Button 2 | ## [Watch it on youtube](https://youtu.be/zC8kkJY8z60) 3 | ### Floating Action Menu Button 4 | 5 | - Floating Action Menu Button Using HTML CSS & JavaScript 6 | - With neumorphism effect. 7 | - And CSS animations. 8 | 9 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode) 10 | 11 | ![preview img](/preview.png) 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Floating action button - Bedimcode 14 | 15 | 16 |
17 |
18 |
19 | 20 |
21 | 22 | 41 |
42 |
43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== VARIABLES CSS ===============*/ 2 | :root { 3 | /*========== Colors ==========*/ 4 | /*Color mode HSL(hue, saturation, lightness)*/ 5 | --first-color: hsl(234, 62%, 56%); 6 | --icon-color: hsl(234, 12%, 24%); 7 | --body-color: hsl(234, 48%, 97%); 8 | --container-color: hsl(234, 100%, 99%); 9 | } 10 | 11 | /*=============== BASE ===============*/ 12 | * { 13 | box-sizing: border-box; 14 | padding: 0; 15 | margin: 0; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | } 21 | 22 | /*=============== BUTTON ===============*/ 23 | .floating { 24 | height: 100vh; 25 | display: grid; 26 | place-items: center; 27 | background-color: var(--body-color); 28 | } 29 | .floating__container { 30 | position: relative; 31 | } 32 | .floating__toggle, .floating__icon { 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | border-radius: 50%; 37 | background-color: var(--container-color); 38 | } 39 | .floating__toggle { 40 | width: 70px; 41 | height: 70px; 42 | font-size: 2rem; 43 | color: var(--first-color); 44 | box-shadow: -6px -6px 24px hsl(234, 48%, 98%), 6px 6px 24px hsl(234, 48%, 88%), inset 6px 6px 24px hsl(234, 48%, 98%), inset -6px -6px 24px hsl(234, 48%, 88%); 45 | position: relative; 46 | z-index: 10; 47 | cursor: pointer; 48 | transition: box-shadow 0.3s ease-in-out, transform 0.3s; 49 | } 50 | .floating__toggle i { 51 | transition: transform 0.8s ease-in-out; 52 | } 53 | .floating__toggle:hover { 54 | box-shadow: 6px 6px 24px hsl(234, 48%, 98%), -6px -6px 24px hsl(234, 48%, 88%), inset -6px -6px 24px hsl(234, 48%, 98%), inset 6px 6px 24px hsl(234, 48%, 88%); 55 | transform: scale(0.95); 56 | } 57 | .floating__icon, .floating__link { 58 | width: 40px; 59 | height: 40px; 60 | } 61 | .floating__icon { 62 | font-size: 1rem; 63 | color: var(--icon-color); 64 | box-shadow: -4px -4px 16px hsl(234, 48%, 98%), 4px 4px 16px hsl(234, 48%, 90%), inset 4px 4px 16px hsl(234, 48%, 98%), inset -4px -4px 16px hsl(234, 48%, 90%); 65 | transition: box-shadow 0.3s ease-in-out; 66 | } 67 | .floating__icon:hover { 68 | box-shadow: 4px 4px 16px hsl(234, 48%, 98%), -4px -4px 16px hsl(234, 48%, 90%), inset -4px -4px 16px hsl(234, 48%, 98%), inset 4px 4px 16px hsl(234, 48%, 90%); 69 | } 70 | .floating__link { 71 | position: absolute; 72 | inset: 0; 73 | margin: auto; 74 | opacity: 0; 75 | transition: transform 0.8s ease-in-out, opacity 0.6s; 76 | z-index: 1; 77 | } 78 | .floating__link:nth-child(1) { 79 | transition-delay: 0.1s; 80 | } 81 | .floating__link:nth-child(2) { 82 | transition-delay: 0.2s; 83 | } 84 | .floating__link:nth-child(3) { 85 | transition-delay: 0.3s; 86 | } 87 | 88 | /* Rotate toggle */ 89 | .active.floating__toggle i { 90 | transform: rotate(135deg); 91 | } 92 | 93 | /* Move icons */ 94 | .active ~ ul .floating__link { 95 | opacity: 1; 96 | } 97 | 98 | .active ~ ul .floating__link:nth-child(1) { 99 | transform: translate(3.5rem, -3.5rem); 100 | } 101 | 102 | .active ~ ul .floating__link:nth-child(2) { 103 | transform: translate(5.5rem); 104 | } 105 | 106 | .active ~ ul .floating__link:nth-child(3) { 107 | transform: translate(3.5rem, 3.5rem); 108 | } -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*=============== VARIABLES CSS ===============*/ 2 | :root{ 3 | /*========== Colors ==========*/ 4 | /*Color mode HSL(hue, saturation, lightness)*/ 5 | --first-color: hsl(234, 62%, 56%); 6 | --icon-color: hsl(234, 12%, 24%); 7 | --body-color: hsl(234, 48%, 97%); 8 | --container-color: hsl(234, 100%, 99%); 9 | } 10 | 11 | /*=============== BASE ===============*/ 12 | *{ 13 | box-sizing: border-box; 14 | padding: 0; 15 | margin: 0; 16 | } 17 | 18 | a{ 19 | text-decoration: none; 20 | } 21 | 22 | /*=============== BUTTON ===============*/ 23 | .floating{ 24 | height: 100vh; 25 | display: grid; 26 | place-items: center; 27 | background-color: var(--body-color); 28 | 29 | &__container{ 30 | position: relative; 31 | } 32 | 33 | &__toggle, 34 | &__icon{ 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | border-radius: 50%; 39 | background-color: var(--container-color); 40 | } 41 | &__toggle{ 42 | width: 70px; 43 | height: 70px; 44 | font-size: 2rem; 45 | color: var(--first-color); 46 | box-shadow: -6px -6px 24px hsl(234, 48%, 98%), 47 | 6px 6px 24px hsl(234, 48%, 88%), 48 | inset 6px 6px 24px hsl(234, 48%, 98%), 49 | inset -6px -6px 24px hsl(234, 48%, 88%); 50 | position: relative; 51 | z-index: 10; 52 | cursor: pointer; 53 | transition: box-shadow .3s ease-in-out, transform .3s; 54 | 55 | & i{ 56 | transition: transform .8s ease-in-out; 57 | } 58 | 59 | &:hover{ 60 | box-shadow: 6px 6px 24px hsl(234, 48%, 98%), 61 | -6px -6px 24px hsl(234, 48%, 88%), 62 | inset -6px -6px 24px hsl(234, 48%, 98%), 63 | inset 6px 6px 24px hsl(234, 48%, 88%); 64 | transform: scale(.95); 65 | } 66 | } 67 | &__icon, 68 | &__link{ 69 | width: 40px; 70 | height: 40px; 71 | } 72 | &__icon{ 73 | font-size: 1rem; 74 | color: var(--icon-color); 75 | box-shadow: -4px -4px 16px hsl(234, 48%, 98%), 76 | 4px 4px 16px hsl(234, 48%, 90%), 77 | inset 4px 4px 16px hsl(234, 48%, 98%), 78 | inset -4px -4px 16px hsl(234, 48%, 90%); 79 | transition: box-shadow .3s ease-in-out; 80 | 81 | &:hover{ 82 | box-shadow: 4px 4px 16px hsl(234, 48%, 98%), 83 | -4px -4px 16px hsl(234, 48%, 90%), 84 | inset -4px -4px 16px hsl(234, 48%, 98%), 85 | inset 4px 4px 16px hsl(234, 48%, 90%); 86 | } 87 | } 88 | &__link{ 89 | position: absolute; 90 | inset: 0; 91 | margin: auto; 92 | opacity: 0; 93 | transition: transform .8s ease-in-out, opacity .6s; 94 | z-index: 1; 95 | 96 | &:nth-child(1){ 97 | transition-delay: .1s; 98 | } 99 | &:nth-child(2){ 100 | transition-delay: .2s; 101 | } 102 | &:nth-child(3){ 103 | transition-delay: .3s; 104 | } 105 | } 106 | } 107 | 108 | /* Rotate toggle */ 109 | .active.floating__toggle i{ 110 | transform: rotate(135deg); 111 | } 112 | 113 | /* Move icons */ 114 | .active ~ ul .floating__link{ 115 | opacity: 1; 116 | } 117 | .active ~ ul .floating__link:nth-child(1){ 118 | transform: translate(3.5rem, -3.5rem); 119 | } 120 | .active ~ ul .floating__link:nth-child(2){ 121 | transform: translate(5.5rem); 122 | } 123 | .active ~ ul .floating__link:nth-child(3){ 124 | transform: translate(3.5rem, 3.5rem); 125 | } --------------------------------------------------------------------------------