Merge branch 'master' into #312/infinte-carousel

Author: shreenarayan123

README.md

@@ -71,11 +71,12 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
   - [ Star Wars Intro](#-star-wars-intro)
   - [ Gradient Animation](#-gradient-animation)
   - [ Zoom when hover](#-zoom-when-hover)
-
   - [Floating Labels V2](#Floating-labelV2)
   - [Scary animation](#scary-animation)
   - [growing-flower](#growing-flower)
   - [infinite-carousel](#infinite-carousel)
+
+
   - [Contributors](#contributors)
   - [Contributing](#contributing)
 
@@ -85,8 +86,10 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
   - [Contributing](#contributing)
 
 
+
 ## <a id="Accordion"></a>Accordion / Toggle
 
+
 [<img src="images/accordion.png" height="230" title="Demo 1">](http://www.mraffaele.com/labs/css-only-accordions/)
 [<img src="images/toggler.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/pyXQrj)
 [<img src="images/toggler2.png" height="230" title="Demo 3">](http://codepen.io/PaulZi/pen/zBbVvV)
@@ -102,6 +105,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 <img src="images/Animated-button-1.png" height="230" title="Demo 1">
 <img src="images/Animated-button.png" height="230" title="Demo 2">
 <img src="images/Animated-button-2.png" height="230" title="Demo 2">
+<img src="images/liquidButton.png" height="230" title="Demo 2">
 
 
 **[⬆ back to top](#quick-links)**
@@ -503,9 +507,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 ## <a id="shuffling-squres"></a>Shuffling squares
 [<img src="images/shuffling-squares.gif" height="230" title="Shuffling squares">](https://im3.ezgif.com/tmp/ezgif-3-41efb679c2.gif)
 
-**[⬆ back to top](#quick-links)**
 
----
 ---
 ## <a id="Floating-labelV2"></a>Floating-labelV2
 [<img src="images/Floatinglabel2.gif" height="230" title="Floating-labelV2">](https://im2.ezgif.com/tmp/ezgif-2-3297933621.gif)
@@ -515,6 +517,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 ---
 ---
 ## <a id="scary-animation"></a>scary-animation
+<<<
 [<img src="images/Scary-animation.gif" height="230" title="scary-animation">](https://im4.ezgif.com/tmp/ezgif-4-04e4dfec68.gif)
 
 **[⬆ back to top](#quick-links)**
@@ -530,6 +533,11 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 ---
 ## <a id="infinite-carousel"></a>infinite-carousel
 [<img src="images/infinite-carousel.gif" height="230" title="infinite-carousel">](https://im4.ezgif.com/tmp/ezgif-4-cf03115fc6.gif)
+=======
+[<img src="images/Scary-animation.gif" height="230" title="Floating-labelV2">](https://im4.ezgif.com/tmp/ezgif-4-04e4dfec68.gif)
+
+=======
+>>>
 
 **[⬆ back to top](#quick-links)**
 
@@ -558,6 +566,14 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 ## <a id="zoom-when-hover"></a> Zoom when hover
 [<img src="image/zoom-effect.gif" height="230" title="zoom-when-hover">](https://codepen.io/kdwzrjtc-the-animator/pen/gOqOwLx)
 
+---
+## <a id="Floating-labelV2"></a>Floating-labelV2
+[<img src="images/Floatinglabel2.gif" height="230" title="Floating-labelV2">](https://im2.ezgif.com/tmp/ezgif-2-3297933621.gif)
+
+**[⬆ back to top](#quick-links)**
+
+---
+
 ## Contributors
 Thanks to these wonderful people who have contributed to this project!
 

ScaryAnimation/scary.css

@@ -239,4 +239,4 @@ https://codepen.io/bullerb/pen/BzKzvK
   80% { transform: translateX(10%); opacity: 0.25; }
   90% { transform: translateX(20%); }
   100% { transform: translateX(30%); }
-}
+

examples/liquidButton.html

@@ -0,0 +1,89 @@
+<style>
+    * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #0c0c0c;
+}
+
+a {
+  position: relative;
+  padding: 20px 50px;
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 200px;
+  overflow: hidden;
+  border-radius: 40px;
+}
+
+a span {
+  position: relative;
+  color: #fff;
+  font-size: 20px;
+  font-family: Arial;
+  letter-spacing: 8px;
+  z-index: 1;
+}
+
+a .liquid {
+  position: absolute;
+  top: -80px;
+  left: 0;
+  width: 200px;
+  height: 200px;
+  background: #4973ff;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
+  transition: .5s;
+}
+
+a .liquid::after,
+a .liquid::before {
+  content: '';
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -75%);
+  background: #000;
+}
+
+a .liquid::before {
+  
+  border-radius: 45%;
+  background: rgba(20, 20, 20, 1);
+  animation: animate 5s linear infinite;
+}
+
+a .liquid::after {
+  
+  border-radius: 40%;
+  background: rgba(20, 20, 20, .5);
+  animation: animate 10s linear infinite;
+}
+
+a:hover .liquid{
+  top: -120px;
+}
+
+@keyframes animate {
+  0% {
+    transform: translate(-50%, -75%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -75%) rotate(360deg);
+  }
+}
+</style>
+<a href="#">
+    <span>Button</span>
+    <div class="liquid"></div>
+  </a>