diff --git a/UI Snippets/Button Animation/main.html b/UI Snippets/Button Animation/main.html new file mode 100644 index 0000000..7f3e01f --- /dev/null +++ b/UI Snippets/Button Animation/main.html @@ -0,0 +1,12 @@ + + + + + + + Button Animation + + + + + \ No newline at end of file diff --git a/UI Snippets/Button Animation/styles.css b/UI Snippets/Button Animation/styles.css new file mode 100644 index 0000000..d22f3a9 --- /dev/null +++ b/UI Snippets/Button Animation/styles.css @@ -0,0 +1,31 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display:flex; + justify-content:center; + align-items:center; + height:100vh; + background:#1e1e2f; + font-family: 'Poppins', sans-serif; +} +.animated-btn{ + padding: 14px 32px; + font-size: 16px; + color:#fff; + background: linear-gradient(90deg, #ff105f, #ffad06); + border:none; + border-radius: 8px; + cursor:pointer; + transition: transform 0.3s ease; +} +.animated-btn:hover{ + transform: scale(1.1) translateY(-5px); + box-shadow: 0 10px 20px rgba(255, 16, 95, 0.5), 0 6px 6px rgba(255, 173, 6, 0.5); +} +.animated-btn:active{ + transform: scale(0.95) translateY(2px); + box-shadow: 0 5px 10px rgba(255, 16, 95, 0.5), 0 3px 3px rgba(255, 173, 6, 0.5); +} \ No newline at end of file