├── README.md ├── assets ├── css │ └── styles.css ├── img │ ├── circle.png │ ├── diamond.png │ ├── star.png │ └── triangle.png └── scss │ ├── base │ └── _base.scss │ ├── components │ └── _button.scss │ ├── config │ └── _variables.scss │ └── styles.scss ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # Magic Animation Button 2 | ## [Watch it on youtube](https://youtu.be/vrt9o-O_JOo) 3 | ### Magic Animation Button 4 | 5 | - Magic Button Hover Effects Animation Using HTML & CSS 6 | - Contains geometric shapes with animation effects. 7 | - Along with brilliant animation on the button. 8 | 9 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 10 | 11 | ![preview img](/preview.png) 12 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | --gradient-color: linear-gradient(90deg, 9 | hsl(48, 100%, 50%) 0%, 10 | hsl(28, 100%, 54%, 100%)); 11 | --black-color: hsl(225, 15%, 6%); 12 | --reflection-color: hsla(48, 30%, 95%, .3); 13 | --body-color: hsl(48, 100%, 98%); 14 | 15 | /*========== Font and typography ==========*/ 16 | /*.5rem = 8px | 1rem = 16px ...*/ 17 | --body-font: "Montserrat", sans-serif; 18 | --normal-font-size: 1rem; 19 | } 20 | 21 | /*=============== BASE ===============*/ 22 | * { 23 | box-sizing: border-box; 24 | padding: 0; 25 | margin: 0; 26 | } 27 | 28 | body { 29 | font-family: var(--body-font); 30 | font-size: var(--normal-font-size); 31 | background-color: var(--body-color); 32 | } 33 | 34 | a { 35 | text-decoration: none; 36 | } 37 | 38 | /*=============== BUTTON ===============*/ 39 | .container { 40 | height: 100vh; 41 | margin-inline: 1.5rem; 42 | display: grid; 43 | place-items: center; 44 | } 45 | 46 | .button { 47 | position: relative; 48 | transition: transform .4s; 49 | } 50 | 51 | .button__content { 52 | position: relative; 53 | background: var(--gradient-color); 54 | padding: 1.25rem 3rem; 55 | border-radius: 4rem; 56 | border: 3px solid var(--black-color); 57 | color: var(--black-color); 58 | display: flex; 59 | align-items: center; 60 | column-gap: .5rem; 61 | overflow: hidden; 62 | } 63 | 64 | .button__text { 65 | font-weight: 700; 66 | } 67 | 68 | .button__icon { 69 | font-size: 1.5rem; 70 | } 71 | 72 | .button__text, 73 | .button__icon { 74 | position: relative; 75 | z-index: 2; 76 | } 77 | 78 | /* Reflection shapes */ 79 | .button__reflection-1, 80 | .button__reflection-2 { 81 | width: 8px; 82 | height: 120px; 83 | background-color: var(--reflection-color); 84 | rotate: 30deg; 85 | position: absolute; 86 | inset: 0; 87 | top: 0; 88 | left: -180%; 89 | margin: auto; 90 | transition: left .6s cubic-bezier(.2, .5, .2, 1.2); 91 | } 92 | 93 | .button__reflection-1::after { 94 | content: ""; 95 | width: 26px; 96 | height: 100%; 97 | background-color: var(--reflection-color); 98 | position: absolute; 99 | top: -1rem; 100 | left: 1.25rem; 101 | } 102 | 103 | .button__reflection-2::after { 104 | content: ""; 105 | width: 40px; 106 | height: 100%; 107 | background-color: var(--reflection-color); 108 | position: absolute; 109 | top: -1rem; 110 | left: .8rem; 111 | } 112 | 113 | /* Moving geometric shapes */ 114 | .button img { 115 | position: absolute; 116 | opacity: 0; 117 | transition: transform .5s, opacity .5s; 118 | } 119 | 120 | .button__star-1 { 121 | width: 20px; 122 | top: -14px; 123 | left: -16px; 124 | transform: rotate(48deg) scale(.1); 125 | } 126 | 127 | .button__star-2 { 128 | width: 40px; 129 | right: -10px; 130 | top: -4px; 131 | transform: rotate(-48deg) scale(.1); 132 | } 133 | 134 | .button__circle-1, 135 | .button__circle-2 { 136 | width: 8px; 137 | } 138 | 139 | .button__circle-1 { 140 | top: -8px; 141 | left: 58px; 142 | transform: scale(.1); 143 | } 144 | 145 | .button__circle-2 { 146 | right: 34px; 147 | bottom: -8px; 148 | transform: scale(.1); 149 | } 150 | 151 | .button__diamond { 152 | width: 18px; 153 | top: -18px; 154 | right: 62px; 155 | transform: scale(.1); 156 | } 157 | 158 | .button__triangle { 159 | width: 30px; 160 | left: 15px; 161 | bottom: -16px; 162 | transform: rotate(-48deg) scale(.1); 163 | } 164 | 165 | /* Gradient shadow */ 166 | .button__shadow { 167 | width: 100%; 168 | height: 100%; 169 | position: absolute; 170 | left: 0; 171 | top: 0; 172 | background: var(--gradient-color); 173 | padding: 1.25rem 3rem; 174 | border-radius: 4rem; 175 | border: 3px solid var(--black-color); 176 | z-index: -1; 177 | transition: transform .3s; 178 | } 179 | 180 | /* View shadow gradient */ 181 | .button:hover .button__shadow { 182 | transform: translate(-.5rem, .5rem); 183 | } 184 | 185 | /* Move reflection */ 186 | .button:hover .button__reflection-1 { 187 | left: 120%; 188 | } 189 | 190 | .button:hover .button__reflection-2 { 191 | left: -70%; 192 | } 193 | 194 | /* View geometric shapes */ 195 | .button:hover { 196 | transform: rotate(-4deg) scale(1.1); 197 | } 198 | 199 | .button:hover img { 200 | opacity: 1; 201 | } 202 | 203 | .button:hover .button__star-1 { 204 | transform: scale(1.1); 205 | transition-delay: .1s; 206 | } 207 | 208 | .button:hover .button__star-2 { 209 | transform: scale(1.1); 210 | } 211 | 212 | .button:hover .button__circle-1 { 213 | transform: translateY(-8px) scale(1.1); 214 | transition-delay: .1s; 215 | } 216 | 217 | .button:hover .button__circle-2 { 218 | transform: translate(-20px, 20px) scale(1.1); 219 | } 220 | 221 | .button:hover .button__diamond { 222 | transform: translateY(7px) rotate(-24deg) scale(1.1); 223 | } 224 | 225 | .button:hover .button__triangle { 226 | transform: rotate(-12deg) scale(1.1); 227 | } -------------------------------------------------------------------------------- /assets/img/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-animation-button/0b104f625dc9dcad1c491989c0a3d21ef3a2455d/assets/img/circle.png -------------------------------------------------------------------------------- /assets/img/diamond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-animation-button/0b104f625dc9dcad1c491989c0a3d21ef3a2455d/assets/img/diamond.png -------------------------------------------------------------------------------- /assets/img/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-animation-button/0b104f625dc9dcad1c491989c0a3d21ef3a2455d/assets/img/star.png -------------------------------------------------------------------------------- /assets/img/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-animation-button/0b104f625dc9dcad1c491989c0a3d21ef3a2455d/assets/img/triangle.png -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /*=============== BASE ===============*/ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | body{ 9 | font-family: var(--body-font); 10 | font-size: var(--normal-font-size); 11 | background-color: var(--body-color); 12 | } 13 | 14 | a{ 15 | text-decoration: none; 16 | } 17 | -------------------------------------------------------------------------------- /assets/scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | /*=============== BUTTON ===============*/ 2 | .container{ 3 | height: 100vh; 4 | margin-inline: 1.5rem; 5 | display: grid; 6 | place-items: center; 7 | } 8 | 9 | .button{ 10 | position: relative; 11 | transition: transform .4s; 12 | 13 | &__content{ 14 | position: relative; 15 | background: var(--gradient-color); 16 | padding: 1.25rem 3rem; 17 | border-radius: 4rem; 18 | border: 3px solid var(--black-color); 19 | color: var(--black-color); 20 | display: flex; 21 | align-items: center; 22 | column-gap: .5rem; 23 | overflow: hidden; 24 | } 25 | &__text{ 26 | font-weight: 700; 27 | } 28 | &__icon{ 29 | font-size: 1.5rem; 30 | } 31 | &__text, 32 | &__icon{ 33 | position: relative; 34 | z-index: 2; 35 | } 36 | // Reflection shapes 37 | &__reflection-1, 38 | &__reflection-2{ 39 | width: 8px; 40 | height: 120px; 41 | background-color: var(--reflection-color); 42 | rotate: 30deg; 43 | position: absolute; 44 | inset: 0; 45 | top: 0; 46 | left: -180%; 47 | margin: auto; 48 | transition: left .6s cubic-bezier(.2, .5, .2, 1.2); 49 | } 50 | &__reflection-1::after{ 51 | content: ''; 52 | width: 26px; 53 | height: 100%; 54 | background-color: var(--reflection-color); 55 | position: absolute; 56 | top: -1rem; 57 | left: 1.25rem; 58 | } 59 | &__reflection-2::after{ 60 | content: ''; 61 | width: 40px; 62 | height: 100%; 63 | background-color: var(--reflection-color); 64 | position: absolute; 65 | top: -1rem; 66 | left: .8rem; 67 | } 68 | // Moving geometric shapes 69 | & img{ 70 | position: absolute; 71 | opacity: 0; 72 | transition: transform .5s, opacity .5s; 73 | } 74 | &__star-1{ 75 | width: 20px; 76 | top: -14px; 77 | left: -16px; 78 | transform: rotate(48deg) scale(.1); 79 | } 80 | &__star-2{ 81 | width: 40px; 82 | right: -10px; 83 | top: -4px; 84 | transform: rotate(-48deg) scale(.1); 85 | } 86 | &__circle-1, 87 | &__circle-2{ 88 | width: 8px; 89 | } 90 | &__circle-1{ 91 | top: -8px; 92 | left: 58px; 93 | transform: scale(.1); 94 | } 95 | &__circle-2{ 96 | right: 34px; 97 | bottom: -8px; 98 | transform: scale(.1); 99 | } 100 | &__diamond{ 101 | width: 18px; 102 | top: -18px; 103 | right: 62px; 104 | transform: scale(.1); 105 | } 106 | &__triangle{ 107 | width: 30px; 108 | left: 15px; 109 | bottom: -16px; 110 | transform: rotate(-48deg) scale(.1); 111 | } 112 | // Gradient shadow 113 | &__shadow{ 114 | width: 100%; 115 | height: 100%; 116 | position: absolute; 117 | left: 0; 118 | top: 0; 119 | background: var(--gradient-color); 120 | padding: 1.25rem 3rem; 121 | border-radius: 4rem; 122 | border: 3px solid var(--black-color); 123 | z-index: -1; 124 | transition: transform .3s; 125 | } 126 | } 127 | 128 | /* View shadow gradient */ 129 | .button:hover .button__shadow{ 130 | transform: translate(-.5rem, .5rem); 131 | } 132 | 133 | /* Move reflection */ 134 | .button:hover .button__reflection-1{ 135 | left: 120%; 136 | } 137 | .button:hover .button__reflection-2{ 138 | left: -70%; 139 | } 140 | 141 | /* View geometric shapes */ 142 | .button{ 143 | &:hover{ 144 | transform: rotate(-4deg) scale(1.1); 145 | 146 | & img{ 147 | opacity: 1; 148 | } 149 | & .button__star-1{ 150 | transform: scale(1.1); 151 | transition-delay: .1s; 152 | } 153 | & .button__star-2{ 154 | transform: scale(1.1); 155 | } 156 | & .button__circle-1{ 157 | transform: translateY(-8px) scale(1.1); 158 | transition-delay: .1s; 159 | } 160 | & .button__circle-2{ 161 | transform: translate(-20px, 20px) scale(1.1); 162 | } 163 | & .button__diamond{ 164 | transform: translateY(7px) rotate(-24deg) scale(1.1); 165 | } 166 | & .button__triangle{ 167 | transform: rotate(-12deg) scale(1.1); 168 | } 169 | } 170 | } -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | --gradient-color: linear-gradient(90deg, 9 | hsl(48, 100%, 50%) 0%, 10 | hsl(28, 100%, 54%, 100%)); 11 | --black-color: hsl(225, 15%, 6%); 12 | --reflection-color: hsla(48, 30%, 95%, .3); 13 | --body-color: hsl(48, 100%, 98%); 14 | 15 | /*========== Font and typography ==========*/ 16 | /*.5rem = 8px | 1rem = 16px ...*/ 17 | --body-font: 'Montserrat', sans-serif; 18 | --normal-font-size: 1rem; 19 | } 20 | -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'components/button' 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Magic animation button - Bedimcode 14 | 15 | 16 |
17 | 18 |
19 | Download 20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-animation-button/0b104f625dc9dcad1c491989c0a3d21ef3a2455d/preview.png --------------------------------------------------------------------------------