WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Magic Animation Button
1474
Andev.web
Open In Editor
Publish Your Code
Recommended
23 November 2024
Social media buttons Hovering
30 August 2024
Pure CSS One Div House Responsive Animation
14 May 2024
Animation title
HTML
Copy
Andev Web
Hover Me
CSS
Copy
/*=============== GOOGLE FONTS ===============*/ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap"); /*=============== VARIABLES CSS ===============*/ :root { /*========== Colors ==========*/ /*Color mode HSL(hue, saturation, lightness)*/ --gradient-color: linear-gradient(90deg, hsl(48, 100%, 50%) 0%, hsl(28, 100%, 54%, 100%)); --black-color: hsl(225, 15%, 6%); --reflection-color: hsla(48, 30%, 95%, .3); --body-color: hsl(0, 0%, 100%); /*========== Font and typography ==========*/ /*.5rem = 8px | 1rem = 16px ...*/ --body-font: "Montserrat", sans-serif; --normal-font-size: 1rem; } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: var(--body-font); font-size: var(--normal-font-size); background: #151F28; } a { text-decoration: none; } /*=============== BUTTON ===============*/ .container { height: 100vh; margin-inline: 1.5rem; display: grid; place-items: center; } .button { position: relative; transition: transform .4s; } .button__content { position: relative; background: var(--gradient-color); padding: 1.25rem 3rem; border-radius: 4rem; border: 3px solid var(--black-color); color: var(--black-color); display: flex; align-items: center; column-gap: .5rem; overflow: hidden; } .button__text { font-weight: 700; } .button__icon { font-size: 1.5rem; } .button__text, .button__icon { position: relative; z-index: 2; } /* Reflection shapes */ .button__reflection-1, .button__reflection-2 { width: 8px; height: 120px; background-color: var(--reflection-color); rotate: 30deg; position: absolute; inset: 0; top: 0; left: -180%; margin: auto; transition: left .6s cubic-bezier(.2, .5, .2, 1.2); } .button__reflection-1::after { content: ""; width: 26px; height: 100%; background-color: var(--reflection-color); position: absolute; top: -1rem; left: 1.25rem; } .button__reflection-2::after { content: ""; width: 40px; height: 100%; background-color: var(--reflection-color); position: absolute; top: -1rem; left: .8rem; } /* Moving geometric shapes */ .button img { position: absolute; opacity: 0; transition: transform .5s, opacity .5s; } .button__star-1 { width: 20px; top: -14px; left: -16px; transform: rotate(48deg) scale(.1); } .button__star-2 { width: 40px; right: -10px; top: -4px; transform: rotate(-48deg) scale(.1); } .button__circle-1, .button__circle-2 { width: 8px; } .button__circle-1 { top: -8px; left: 58px; transform: scale(.1); } .button__circle-2 { right: 34px; bottom: -8px; transform: scale(.1); } .button__diamond { width: 18px; top: -18px; right: 62px; transform: scale(.1); } .button__triangle { width: 30px; left: 15px; bottom: -16px; transform: rotate(-48deg) scale(.1); } /* Gradient shadow */ .button__shadow { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: var(--gradient-color); padding: 1.25rem 3rem; border-radius: 4rem; border: 3px solid var(--black-color); z-index: -1; transition: transform .3s; } /* View shadow gradient */ .button:hover .button__shadow { transform: translate(-.5rem, .5rem); } /* Move reflection */ .button:hover .button__reflection-1 { left: 120%; } .button:hover .button__reflection-2 { left: -70%; } /* View geometric shapes */ .button:hover { transform: rotate(-4deg) scale(1.1); } .button:hover img { opacity: 1; } .button:hover .button__star-1 { transform: scale(1.1); transition-delay: .1s; } .button:hover .button__star-2 { transform: scale(1.1); } .button:hover .button__circle-1 { transform: translateY(-8px) scale(1.1); transition-delay: .1s; } .button:hover .button__circle-2 { transform: translate(-20px, 20px) scale(1.1); } .button:hover .button__diamond { transform: translateY(7px) rotate(-24deg) scale(1.1); } .button:hover .button__triangle { transform: rotate(-12deg) scale(1.1); }/*=============== GOOGLE FONTS ===============*/ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap"); /*=============== VARIABLES CSS ===============*/ :root { /*========== Colors ==========*/ /*Color mode HSL(hue, saturation, lightness)*/ --gradient-color: linear-gradient(90deg, hsl(48, 100%, 50%) 0%, hsl(28, 100%, 54%, 100%)); --black-color: hsl(225, 15%, 6%); --reflection-color: hsla(48, 30%, 95%, .3); --body-color: hsl(48, 100%, 98%); /*========== Font and typography ==========*/ /*.5rem = 8px | 1rem = 16px ...*/ --body-font: "Montserrat", sans-serif; --normal-font-size: 1rem; } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); } a { text-decoration: none; } /*=============== BUTTON ===============*/ .container { height: 100vh; margin-inline: 1.5rem; display: grid; place-items: center; } .button { position: relative; transition: transform .4s; } .button__content { position: relative; background: var(--gradient-color); padding: 1.25rem 3rem; border-radius: 4rem; border: 3px solid var(--black-color); color: var(--black-color); display: flex; align-items: center; column-gap: .5rem; overflow: hidden; } .button__text { font-weight: 700; font-size: 20px; } .button__icon { font-size: 1.5rem; } .button__text, .button__icon { position: relative; z-index: 2; } /* Reflection shapes */ .button__reflection-1, .button__reflection-2 { width: 8px; height: 120px; background-color: var(--reflection-color); rotate: 30deg; position: absolute; inset: 0; top: 0; left: -180%; margin: auto; transition: left .6s cubic-bezier(.2, .5, .2, 1.2); } .button__reflection-1::after { content: ""; width: 26px; height: 100%; background-color: var(--reflection-color); position: absolute; top: -1rem; left: 1.25rem; } .button__reflection-2::after { content: ""; width: 40px; height: 100%; background-color: var(--reflection-color); position: absolute; top: -1rem; left: .8rem; } /* Moving geometric shapes */ .button img { position: absolute; opacity: 0; transition: transform .5s, opacity .5s; } .button__star-1 { width: 20px; top: -14px; left: -16px; transform: rotate(48deg) scale(.1); } .button__star-2 { width: 40px; right: -10px; top: -4px; transform: rotate(-48deg) scale(.1); } .button__circle-1, .button__circle-2 { width: 8px; } .button__circle-1 { top: -8px; left: 58px; transform: scale(.1); } .button__circle-2 { right: 34px; bottom: -8px; transform: scale(.1); } .button__diamond { width: 18px; top: -18px; right: 62px; transform: scale(.1); } .button__triangle { width: 30px; left: 15px; bottom: -16px; transform: rotate(-48deg) scale(.1); } /* Gradient shadow */ .button__shadow { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: var(--gradient-color); padding: 1.25rem 3rem; border-radius: 4rem; border: 3px solid var(--black-color); z-index: -1; transition: transform .3s; } /* View shadow gradient */ .button:hover .button__shadow { transform: translate(-.5rem, .5rem); } /* Move reflection */ .button:hover .button__reflection-1 { left: 120%; } .button:hover .button__reflection-2 { left: -70%; } /* View geometric shapes */ .button:hover { transform: rotate(-4deg) scale(1.1); } .button:hover img { opacity: 1; } .button:hover .button__star-1 { transform: scale(1.1); transition-delay: .1s; } .button:hover .button__star-2 { transform: scale(1.1); } .button:hover .button__circle-1 { transform: translateY(-8px) scale(1.1); transition-delay: .1s; } .button:hover .button__circle-2 { transform: translate(-20px, 20px) scale(1.1); } .button:hover .button__diamond { transform: translateY(7px) rotate(-24deg) scale(1.1); } .button:hover .button__triangle { transform: rotate(-12deg) scale(1.1); }
JS
Copy