From fd33454c89e6801a387469bcdd61267de890062e Mon Sep 17 00:00:00 2001 From: "NoClimax@888" Date: Sat, 18 Mar 2023 05:09:03 +0530 Subject: [PATCH] Add_Animation_Button --- public/index.html | 33 +++++++++++++++++++++------------ public/style.css | 26 ++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 public/style.css diff --git a/public/index.html b/public/index.html index 99650d0d9..fff41a838 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,9 @@ + Animated Button + + @@ -33,8 +36,25 @@ Animated Buttons +
+ + - + diff --git a/public/style.css b/public/style.css new file mode 100644 index 000000000..635ef5caa --- /dev/null +++ b/public/style.css @@ -0,0 +1,26 @@ +.animated-button { + background-color: #ff0000; + border: none; + color: white; + padding: 50px 300px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 36px; + margin: 500px 700px; + cursor: pointer; + transition-duration: 0.4s; +} + +.animated-button:hover { + background-color: white; + color: #ffea00; + box-shadow: 0 0 10px #252925; +} + +.animated-button:active { + background-color: #4CAF50; + color: white; + transform: translateY(2px); + box-shadow: 0 0 50px #e2e7e3; +}