Added a Cool Button (#41)

* Don't Click this Button * Added a Cool Button
Spyware007 · Oct 16, 2022 · 7748dc8 · 7748dc8
1 parent 9494d19
commit 7748dc8
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 0 deletions.
diff --git a/public/Buttons/SaurabhBarde-007_2/index.html b/public/Buttons/SaurabhBarde-007_2/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Buttons</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="checkbox"></div>
+     <div class="container">
+        <div class="buttons">
+            <a class="btn btn3">Click Me<span></span></a>
+        </div>
+     </div>
+</body>
+</html>
diff --git a/public/Buttons/SaurabhBarde-007_2/styles.css b/public/Buttons/SaurabhBarde-007_2/styles.css
@@ -0,0 +1,75 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html,body{
+    height: 100%;
+}
+
+body{
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-weight: 400;
+}
+
+.container{
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.buttons{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn{
+    text-decoration: none;
+    padding: 20px 50px;
+    font-size: 1.25em;
+    position: relative;
+    margin: 32px;
+}
+
+
+/* button 3 */
+
+.btn3{
+    overflow: hidden;
+    color: white;
+    border-radius: 30px;
+    box-shadow: 0 0 0 0 rgba(143, 64, 248,0.5), 0 0 0 0 rgba(39, 200, 245, 0.5);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.btn3::after{
+    content: "";
+    width: 400px;
+    height: 400px;
+    position: absolute;
+    top: -50px;
+    left: -100px;
+    background-color: #ff3cac;
+    background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 );
+    z-index: -1; 
+    transition: transform 0.5s ease;
+}
+
+.btn3:hover{
+    transform: translate(0, -6px);
+    box-shadow: 10px -10px 25px 0 rgba(143, 64, 248,0.5), -10px 10px 25px 0 rgba(39, 200, 245, 0.5);
+}
+
+.btn3:hover::after{
+    transform: rotate(150deg);
+}
+
+
+
+
+
+
diff --git a/src/components/Main/Main.jsx b/src/components/Main/Main.jsx
@@ -6,6 +6,11 @@ const Main = () => {
     <>
       <h1 className={classes.text}>Explore the Buttons by our Contributors.</h1>
       <div className={classes.btns_container}>
+        <iframe
+          className={classes.container}
+          title="SaurabhBarde-007"
+          src="Buttons/SaurabhBarde-007_2/index.html"
+        ></iframe>
         <iframe
           className={classes.container}
           title="SaurabhBarde-007"