diff --git a/index.css b/index.css
new file mode 100644
index 0000000..d685c0b
--- /dev/null
+++ b/index.css
@@ -0,0 +1,47 @@
+body{
+ background-color:#E0E5EC;
+ height: 100vh;
+ margin: 0;
+ text-align: center;
+ display: grid;
+ padding-top: 200px;
+}
+button{
+ background-color: #E0E5EC;
+ border: none;
+ border-radius: 6px;
+ box-shadow: 9px 9px 16px rgba(163,177,198,0.6);
+ font-weight: 700;
+ height: 96px;
+ margin-bottom: 48px;
+ margin-right: 48px;
+ overflow: hidden;
+ position: relative;
+ text-transform: uppercase;
+ width: 96px;
+}
+button::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 200%;
+ height: 100%;
+ opacity: 0;
+ transform: translateX(-100%);
+ background: rgba(255,255,255,0.13);
+ background: linear-gradient(to right,rgba(255,255,255,0.13),rgba(255,255,255,0.13),rgba(255,255,255,0.13));
+}
+button:hover::after{
+ opacity: 1;
+ top: 0;
+ left: 0;
+ transform: translateX(0);
+ transition-property: transform,opacity;
+ transition-duration: 0.7s,0.15s;
+ transition-timing-function: ease;
+}
+button:active::after
+{
+ opacity: 0;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..579ecb9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ Beautiful Button Using CSS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file