diff --git a/css/component.css b/css/component.css
index f4ff34e..ecc4c3a 100755
--- a/css/component.css
+++ b/css/component.css
@@ -1638,7 +1638,7 @@
 
 /* Button 8c */
 .btn-8c:after {
-	width: 21%; /* should be 20% but there's a gap in Chrome Version 34.0.1847.131 */
+	width: 21%;
 	height: 100%;
 	left: -20%;
 	top: 0;
@@ -1821,3 +1821,88 @@
 	transform-origin: 50% 0%;
 	transform: rotateX(90deg) translateY(-100%);
 }
+
+.btn-9 {
+	position: relative;
+	padding: 20px 50px;
+	display: block;
+	width: 200px;
+	transform: scale(1.3);
+	overflow: hidden;
+	border-radius: 30px;
+	border: none;
+	cursor: pointer;
+	background: rgba(20, 20, 20, .5);
+	border: 1px solid rgba(255, 255, 255, .2);
+	margin: 30px 50px;
+	box-shadow: 5px 5px rgba(0, 0, 0, 0.4),
+              10px 10px rgba(0, 0, 0, 0.3),
+              15px 15px rgba(0, 0, 0, 0.2),
+			  20px 20px rgba(0, 0, 0, 0.1),
+			  25px 25px rgba(0, 0, 0, 0.1);
+}
+
+.btn-9 .btn-9-text {
+	position: relative;
+	color: #fff;
+	font-size: 15px;
+	letter-spacing: 5px;
+	z-index: 1;
+}
+
+.btn-9 .btn-9-liquid {
+	position: absolute;
+	top: -80px;
+	left: 0;
+	width: 200px;
+	height: 200px;
+	background: #7b2cbf;
+	box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
+	transition: .5s;
+}
+
+.btn-9 .btn-9-liquid::after,
+.btn-9 .btn-9-liquid::before {
+	content: '';
+	width: 200%;
+	height: 200%;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -75%);
+	background: #000;
+}
+
+.btn-9 .btn-9-liquid::before {
+	border-radius: 45%;
+	background: #141414;
+	animation: btn-9-animate 5s linear infinite;
+}
+
+.btn-9 .btn-9-liquid::after {
+	border-radius: 40%;
+	background: rgba(20, 20, 20, .5);
+	animation: animate 10s linear infinite;
+}
+
+.btn-9:hover .btn-9-liquid {
+	top: 20px;
+}
+
+.btn-9d:hover .btn-9-liquid ,.btn-9e:hover .btn-9-liquid,.btn-9f:hover .btn-9-liquid{
+	top: -120px;
+}
+
+.btn-9c, .btn-9f{
+	border-radius: 5px;
+}
+
+@keyframes btn-9-animate {
+	0% {
+		transform: translate(-50%, -75%) rotate(0deg);
+	}
+
+	100% {
+		transform: translate(-50%, -75%) rotate(360deg);
+	}
+}
diff --git a/css/default.css b/css/default.css
index be868fb..36bd115 100755
--- a/css/default.css
+++ b/css/default.css
@@ -1,5 +1,5 @@
 /* General Demo Style */
-@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+@import url(//fonts.googleapis.com/css?family=Lato:300,400,700);
 
 @font-face {
 	font-family: 'codropsicons';
@@ -187,10 +187,32 @@ a:active {
 	font-weight: bold;
 }
 
+.color-9{
+	background: #10002b;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+.container > section.info p {
+	color: #fff;
+	font-size: 1.3em;
+	font-weight: 300;
+}
+
+.container > section.info p a {
+	color: #fff;
+	font-weight: 700;
+}
+
+.container > section.info p a:hover {
+	color: #0c69a4;
+}
+
 @media screen and (max-width: 25em) {
 
 	.codrops-icon span {
 		display: none;
 	}
 
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 9396d05..a4ed067 100755
--- a/index.html
+++ b/index.html
@@ -169,7 +169,45 @@ <h1>Creative Button Styles <span>Modern and subtle styles &amp; effects for butt
 				<p class="perspective">
 					<button class="btn btn-8 btn-8g">3D Button</button>
 				</p>
-			</section>
+            </section>
+            <section class="color-9">
+                <p class="liquid-btn">
+                    <button class="btn btn-9 btn-9a">
+                        <div class="btn-9-liquid"></div>
+		                <span class="btn-9-text">Button</span>
+                    </button>
+                </p>
+                <p class="liquid-btn">
+                    <button class="btn btn-9 btn-9b">
+                        <div class="btn-9-liquid"></div>
+		                <span class="btn-9-text">Button</span>
+                    </button>
+                </p>
+                <p class="liquid-btn">
+                    <button class="btn btn-9 btn-9c">
+                        <div class="btn-9-liquid"></div>
+		                <span class="btn-9-text">Button</span>
+                    </button>
+                </p>
+                <p class="liquid-btn">
+                    <button class="btn btn-9 btn-9d">
+                        <div class="btn-9-liquid"></div>
+		                <span class="btn-9-text">Button</span>
+                    </button>
+				</p>
+				<p class="liquid-btn">
+                    <button class="btn btn-9 btn-9e">
+                        <div class="btn-9-liquid"></div>
+		                <span class="btn-9-text">Button</span>
+                    </button>
+                </p>
+                <p class="liquid-btn">
+                    <button class="btn btn-9 btn-9f">
+                        <div class="btn-9-liquid"></div>
+		                <span class="btn-9-text">Button</span>
+                    </button>
+				</p>
+            </section>
 		</div><!-- /container -->
 		<script src="js/classie.js"></script>
 		<script>
@@ -206,4 +244,4 @@ <h1>Creative Button Styles <span>Modern and subtle styles &amp; effects for butt
 			}, false );
 		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>