├── README.md ├── assets ├── css │ └── styles.css ├── img │ ├── cone.png │ ├── icosahedron.png │ ├── sphere.png │ └── torus.png └── scss │ └── styles.scss ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # 🔥 Magic Motion Button 2 | ## [Watch it on youtube](https://youtu.be/xjCUw2EHSgQ) 3 | ### 🔥 Magic Motion Button 4 | 5 | - Magic Motion Button Using HTML & CSS. 6 | - With hover effect animation. 7 | 8 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode) 9 | 10 | ![preview img](/preview.png) 11 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | /*========== Colors ==========*/ 7 | --first-color: hsl(217, 75%, 80%); 8 | --body-color: hsl(211, 100%, 95%); 9 | 10 | /*========== Font and typography ==========*/ 11 | --body-font: 'Montserrat Alternates', sans-serif; 12 | --normal-font-size: 1.25rem; 13 | } 14 | 15 | /*=============== BASE ===============*/ 16 | * { 17 | box-sizing: border-box; 18 | padding: 0; 19 | margin: 0; 20 | } 21 | 22 | body { 23 | height: 100vh; 24 | display: grid; 25 | place-items: center; 26 | background-color: var(--body-color); 27 | font-family: var(--body-font); 28 | font-size: var(--normal-font-size); 29 | } 30 | 31 | a { 32 | text-decoration: none; 33 | } 34 | 35 | /*=============== MAGIC BUTTON ===============*/ 36 | .button { 37 | position: relative; 38 | background-color: var(--first-color); 39 | color: #fff; 40 | padding: .9rem 2.20rem; 41 | border-radius: 3rem; 42 | transition: .4s; 43 | } 44 | 45 | .button::after { 46 | content: ''; 47 | width: 80%; 48 | height: 40%; 49 | background: linear-gradient(80deg, 50 | hsl(217, 80%, 80%) 10%, 51 | hsl(217, 85%, 70%) 48%); 52 | position: absolute; 53 | left: 0; 54 | right: 0; 55 | bottom: -4px; 56 | margin: 0 auto; 57 | border-radius: 3rem; 58 | filter: blur(12px); 59 | z-index: -1; 60 | opacity: 0; 61 | transition: opacity .4s; 62 | } 63 | 64 | .button__text { 65 | position: relative; 66 | z-index: 10; 67 | } 68 | 69 | .button img { 70 | position: absolute; 71 | inset: 0; 72 | margin: auto; 73 | pointer-events: none; 74 | transition: .6s; 75 | opacity: 0; 76 | } 77 | 78 | /* Move 3D geometric elements */ 79 | .button__cone { 80 | width: 18px; 81 | transform: translate(-25px, -6px) rotate(55deg); 82 | filter: blur(.5px); 83 | } 84 | 85 | .button__torus { 86 | width: 38px; 87 | transform: translate(7px, -14px) rotate(80deg); 88 | } 89 | 90 | .button__icosahedron { 91 | width: 36px; 92 | transform: translate(34px, -4px) rotate(-45deg); 93 | filter: blur(.9px); 94 | } 95 | 96 | .button__sphere { 97 | width: 30px; 98 | transform: translate(-5px, 15px) rotate(40deg); 99 | } 100 | 101 | /* View shadow gradient */ 102 | .button:hover::after { 103 | opacity: 1; 104 | } 105 | 106 | /* Button scale */ 107 | .button:hover { 108 | transform: scale(1.3); 109 | } 110 | 111 | /* View 3D geometric elements */ 112 | .button:hover img { 113 | opacity: 1; 114 | } 115 | 116 | .button:hover .button__cone { 117 | transform: translate(-38px, -10px) scale(1.2); 118 | } 119 | 120 | .button:hover .button__torus { 121 | transform: translate(7px, -32px) scale(1.1); 122 | } 123 | 124 | .button:hover .button__icosahedron { 125 | transform: translate(50px, -20px) scale(1.1); 126 | } 127 | 128 | .button:hover .button__sphere { 129 | transform: translate(-14px, 20px) scale(1.1); 130 | } 131 | -------------------------------------------------------------------------------- /assets/img/cone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-motion-button/82af3d3d7522083e3d2b0661826d99ecf056c53a/assets/img/cone.png -------------------------------------------------------------------------------- /assets/img/icosahedron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-motion-button/82af3d3d7522083e3d2b0661826d99ecf056c53a/assets/img/icosahedron.png -------------------------------------------------------------------------------- /assets/img/sphere.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-motion-button/82af3d3d7522083e3d2b0661826d99ecf056c53a/assets/img/sphere.png -------------------------------------------------------------------------------- /assets/img/torus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-motion-button/82af3d3d7522083e3d2b0661826d99ecf056c53a/assets/img/torus.png -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | /*========== Colors ==========*/ 7 | --first-color: hsl(217, 75%, 80%); 8 | --body-color: hsl(211, 100%, 95%); 9 | 10 | /*========== Font and typography ==========*/ 11 | --body-font: 'Montserrat Alternates', sans-serif; 12 | --normal-font-size: 1.25rem; 13 | } 14 | 15 | /*=============== BASE ===============*/ 16 | *{ 17 | box-sizing: border-box; 18 | padding: 0; 19 | margin: 0; 20 | } 21 | 22 | body{ 23 | height: 100vh; 24 | display: grid; 25 | place-items: center; 26 | background-color: var(--body-color); 27 | font-family: var(--body-font); 28 | font-size: var(--normal-font-size); 29 | } 30 | 31 | a{ 32 | text-decoration: none; 33 | } 34 | 35 | /*=============== MAGIC BUTTON ===============*/ 36 | .button{ 37 | position: relative; 38 | background-color: var(--first-color); 39 | color: #fff; 40 | padding: .9rem 2.20rem; 41 | border-radius: 3rem; 42 | transition: .4s; 43 | 44 | &::after{ 45 | content: ''; 46 | width: 80%; 47 | height: 40%; 48 | background: linear-gradient(80deg, 49 | hsl(217, 80%, 80%) 10%, 50 | hsl(217, 85%, 70%) 48%); 51 | position: absolute; 52 | left: 0; 53 | right: 0; 54 | bottom: -4px; 55 | margin: 0 auto; 56 | border-radius: 3rem; 57 | filter: blur(12px); 58 | z-index: -1; 59 | opacity: 0; 60 | transition: opacity .4s; 61 | } 62 | 63 | &__text{ 64 | position: relative; 65 | z-index: 10; 66 | } 67 | & img{ 68 | position: absolute; 69 | pointer-events: none; 70 | inset: 0; 71 | margin: auto; 72 | transition: .6s; 73 | opacity: 0; 74 | } 75 | // Move 3D geometric elements 76 | &__cone{ 77 | width: 18px; 78 | transform: translate(-25px, -6px) rotate(55deg); 79 | filter: blur(.5px); 80 | } 81 | &__torus{ 82 | width: 38px; 83 | transform: translate(7px, -14px) rotate(80deg); 84 | } 85 | &__icosahedron{ 86 | width: 36px; 87 | transform: translate(34px, -4px) rotate(-45deg); 88 | filter: blur(.9px); 89 | } 90 | &__sphere{ 91 | width: 30px; 92 | transform: translate(-5px, 15px) rotate(40deg); 93 | } 94 | } 95 | 96 | /* View shadow gradient */ 97 | .button:hover::after{ 98 | opacity: 1; 99 | } 100 | 101 | /* Button scale */ 102 | .button:hover{ 103 | transform: scale(1.3); 104 | } 105 | 106 | /* View 3D geometric elements */ 107 | .button{ 108 | &:hover{ 109 | & img{ 110 | opacity: 1; 111 | } 112 | & .button__cone{ 113 | transform: translate(-38px, -10px) scale(1.2); 114 | } 115 | & .button__torus{ 116 | transform: translate(7px, -32px) scale(1.1); 117 | } 118 | & .button__icosahedron{ 119 | transform: translate(50px, -20px) scale(1.1); 120 | } 121 | & .button__sphere{ 122 | transform: translate(-14px, 20px) scale(1.1); 123 | } 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Magic motion button - Bedimcode 11 | 12 | 13 | 14 | 15 | play 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/magic-motion-button/82af3d3d7522083e3d2b0661826d99ecf056c53a/preview.png --------------------------------------------------------------------------------