zero-to-mastery · Kieroncoombs · Apr 1, 2023
diff --git a/src/blocks/KieronCoombs/icon.jpg b/src/blocks/KieronCoombs/icon.jpg
diff --git a/src/blocks/KieronCoombs/index.html b/src/blocks/KieronCoombs/index.html
@@ -0,0 +1,27 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <title>Animated Buttons</title>
+</head>
+<body>
+    <header>   
+        <h1>My Button Animation Page</h1>
+        <p>Just a text making some button animations. hope you guys enjoy them :) </p>
+    </header>
+
+    <div class="container">
+        <div class="block first">Animation 1</div>
+        <div class="block second"><span>Animation 2</span></div>
+        <div class="block third"><span>Animation 3</span></div>
+        <div class="block forth"><span>Animation 4</span></div>
+        <div class="block fith"id="box5"><span>Animation 5</span><br><span id="span"></span></div>
+        <div class="block sixth">Animation 6</div>
+        <div class="block seventh">Animation 7</div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/src/blocks/KieronCoombs/meta.json b/src/blocks/KieronCoombs/meta.json
@@ -0,0 +1,5 @@
+{
+    "block_name": "Button Animations",
+    "author_name": "Kieroncoombs",
+    "author_github-url": "https://github.com/Kieroncoombs"
+}
diff --git a/src/blocks/KieronCoombs/script.js b/src/blocks/KieronCoombs/script.js
@@ -0,0 +1,10 @@
+const box5 = document.getElementById('box5');
+const span = document.getElementById('span');
+
+box5.addEventListener('mouseenter', () => {
+  span.appendChild(document.createTextNode('Image?'));
+});
+
+box5.addEventListener('mouseleave', () => {
+  span.removeChild(span.firstChild);
+});
diff --git a/src/blocks/KieronCoombs/style.css b/src/blocks/KieronCoombs/style.css
@@ -0,0 +1,279 @@
+* {
+    margin: 0;
+    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+}
+body{
+    background-color: rgb(32, 32, 32);
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+header{
+    text-align: center;
+    padding: 50px;
+    color: aliceblue;
+    font-size: 1.6rem;
+}
+p {
+    padding: 20px;
+}
+.container{
+
+    display: grid;
+    align-items: center;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr) );
+    grid-template-rows: 1fr;
+    gap: 50px;
+    padding: 50px;
+
+}
+.block{
+    height: 300px;
+    background-color: rgb(0, 0, 0);
+    transition: 0.5s;
+    display: flex;
+    font-size: larger;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    border: 2px solid white;
+    border-radius: 5px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+
+}
+.block.first:hover{
+    height: 300px;
+    transform:translateY(-10px);
+    background-color: rgb(255, 255, 254);
+    transition: 0.5s;
+    color: black;
+}
+span {
+    position: relative;
+    z-index: 1;
+
+}
+.second::before{
+content: "";
+position: absolute;
+width: 500px;
+height: 500px;
+background-color: rgb(255, 255, 255);
+border-radius: 25px;
+transform: translateY(400px);
+opacity: 0;
+transition: 0.5s ease; 
+
+}
+@keyframes fill {
+    from {
+        transform: translateY(400px) rotate(0deg);
+    }
+    to {
+        transform: translateY(90px);
+    }
+}
+.second:hover::before{
+    transform:translateY(90px);
+    opacity: 1;
+    animation: fill 0.5s ease;
+}
+.second:hover {
+    color: black;
+    transition: 0.8s ease; 
+    transform:translateY(-10px);
+}
+.third::before{
+    transform:scale(0);
+    content: "";
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background-color: white;
+    border-radius: 50px;
+    transition: 0.5s ease;
+    opacity: 0;
+}
+@keyframes expand {
+    from {
+        transform: scale(0);
+    }
+    to {
+        transform: scale(12);
+    }
+}
+.third:hover::before{
+    transform:translateY(-5px);
+    opacity: 1;
+    animation: expand 0.5s ease;
+    transform:scale(12);
+}
+.third:hover{
+    color: black;
+    transform:translateY(-10px);
+}
+.forth::before{
+    position: absolute;
+    content: '';
+    width: 500px;
+    height: 200px;
+    background-color: white;
+    left: 375px;
+    bottom: 150px;
+    transition: 0.5s ease;
+    opacity: 0;
+}
+.forth::after{
+    position: absolute;
+    content: '';
+    width: 500px;
+    height: 200px;
+    background-color: white;
+    right: 375px;
+    bottom: -50px;
+    transition: 0.5s ease;
+    opacity: 0;
+}
+@keyframes slideleft {
+    from {
+        left: 375px;
+    }
+    to {
+        left: -20px; 
+    }
+}
+@keyframes slideright {
+    from {
+        right: 375px;
+    }
+    to {
+        right: -20px;
+    }
+}
+.forth:hover::before{
+    left: -20px;
+    opacity: 1;
+    animation: slideleft 0.5s ease;
+    transform:translateY(-10px);
+}
+
+.forth:hover::after{
+    right: -20px;
+    opacity: 1;
+    animation: slideright 0.5s ease;
+    transform:translateY(-10px);
+}
+.forth:hover{
+    color: black;
+    transform:translateY(-10px);
+}
+.fith::before{
+    position: absolute;
+    content: '';
+    width: 500px;
+    height: 500px;
+    background-color: white;
+    left: 103px;
+    transform: translateY(500px) rotate(47deg);
+    transition: 0.5s;
+    opacity: 0;
+    z-index: 1;
+}
+@keyframes spin {
+    from {
+        transform: translateY(500px) rotate(45deg);
+    }
+    to {
+        transform: translateY(150px) rotate(45deg);
+    }
+}
+.fith:hover::before{
+    left: 103px;
+    transform: translateY(150px) rotate(45deg);
+    opacity: 1;
+    animation: spin 0.6s ease;
+}
+.fith:hover{
+    color: rgb(255, 255, 255);
+    transform:translateY(-10px);
+    z-index: 1;
+}
+#span{
+    color: black;
+    font-size: larger;
+    transform: translateX(30px);
+    transition: 0.5s;
+}
+.sixth::before{
+    content: "";
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    transition: 0.5s;
+    transform: scale(1);
+    opacity: 1;
+    border-radius: 5px;
+
+}
+@keyframes pulse {
+   from {
+    transform: scale(0);
+    opacity: 1;
+
+   }
+   to{
+    transform: scale(1);
+    background-color: white;
+    opacity: 0;
+   }
+}
+.sixth:hover::before{
+    transform: scale(1);
+    opacity: 0;
+    animation: pulse .5s ease-in-out;
+    transition: 0.2s;
+}
+.sixth:hover{
+    transform:translateY(-10px);
+}
+.seventh::before{
+    content: "";
+    position: absolute;
+    width: 350px;
+    height: 350px;
+    background-color: white;
+    opacity: 0;
+    transition: 0.5s;
+    transform: scale(1);
+
+    z-index: -1;    
+}
+@keyframes surround {
+    from {
+        transform: scale(1);
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+        -webkit-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7);
+        -moz-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7);
+        box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7);
+    }
+}
+.seventh:hover::before{
+    -webkit-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7);
+    -moz-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7);
+    box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7);
+    transform: scale(1);
+    opacity: 1;
+    animation: surround .2s ease-in-out;
+    transition: 0.5s;
+}
+.seventh:hover{
+    transform:translateY(-10px);
+    color: black;
+
+}