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 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+	<title>Animated Button</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -33,8 +36,25 @@
     <title>Animated Buttons</title>
   </head>
   <body>
+    <script
+      data-name="BMC-Widget"
+      data-cfasync="false"
+      src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+      data-id="omgawande"
+      data-description="Support me on Buy me a coffee!"
+      data-message="Thank you for your support. I hope you will like this project. 🤩"
+      data-color="#FEDC02"
+      data-position="Right"
+      data-x_margin="18"
+      data-y_margin="18">
+      function welcomeMessage() {
+        alert("Welcome!");
+      }
+    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    
+    <button class="animated-button" onclick="welcomeMessage()">Click Me</button>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -45,17 +65,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script
-      data-name="BMC-Widget"
-      data-cfasync="false"
-      src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
-      data-id="omgawande"
-      data-description="Support me on Buy me a coffee!"
-      data-message="Thank you for your support. I hope you will like this project. 🤩"
-      data-color="#FEDC02"
-      data-position="Right"
-      data-x_margin="18"
-      data-y_margin="18"
-    ></script>
+    
   </body>
 </html>
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;
+}
