Animation 3D Free Code
Tags: html, css, tutorial, github
Published: 2021-10-23 03:57:52

<!----mulai Animasi Dirgahayu Indonesia --->
<!doctype html>


Animasi Dirgahayu Indonesia
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="https://awgroupchannel.my.id/animasi.js"></script>
<style>
	@keyframes animate-earth {
		from { background-position: 120% 70px, 10px 0px, 0px 0px;  } 
		to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
	}
	@-webkit-keyframes animate-earth {
		from { background-position: 120% 70px, 0px 0px, 0px 0px;  } 
		to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
	}
	@-moz-keyframes animate-earth {
		from { background-position: 120% 70px, 0px 0px, 0px 0px;  } 
		to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
	}
	@-ms-keyframes animate-earth {
		from { background-position: 120% 70px, 0px 0px, 0px 0px;  } 
		to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
	}


	@keyframes move-twink-back {
	    from {background-position:0 0;}
	    to {background-position:-10000px 5000px;}
	}
	@-webkit-keyframes move-twink-back {
	    from {background-position:0 0;}
	    to {background-position:-10000px 5000px;}
	}
	@-moz-keyframes move-twink-back {
	    from {background-position:0 0;}
	    to {background-position:-10000px 5000px;}
	}
	@-ms-keyframes move-twink-back {
	    from {background-position:0 0;}
	    to {background-position:-10000px 5000px;}
	}

	@keyframes move-mists-back {
	    from {background-position:0 0;}
	    to {background-position:-10000px 1000px;}
	}
	@-webkit-keyframes move-mists-back {
	    from {background-position:0 0;}
	    to {background-position:-10000px 1000px;}
	}
	@-moz-keyframes move-mists-back {
	    from {background-position:0 0;}
	    to {background-position:-10000px 1000px;}
	}
	@-ms-keyframes move-mists-back {
	    from {background-position: 0 0;}
	    to {background-position:-10000px 1000px;}
	}

	.stars, .twinks, .mists, .earth {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		width:100%;
		height:100%;
		display:block;
	}

	.stars {
		background:#000 url(https://1.bp.blogspot.com/-butQbx3485A/YPwRATotmBI/AAAAAAAADos/8OEMLYPY-0gCWq79T8hjBz92aGI14fp8gCLcBGAsYHQ/s100/twinks.png) repeat top center;
	}

	.rocket {
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		margin: 200px 0px 0px 45%;
	}

	.twinks{
		background:transparent url(https://1.bp.blogspot.com/-puRDfVvZqj0/YPwTuELonhI/AAAAAAAADpM/IPSgmPZzGm4UkjXjmL2Kr7G627wr8h8OwCLcBGAsYHQ/s768/stars.png) repeat top center;
		-moz-animation:move-twink-back 200s linear infinite;
		-ms-animation:move-twink-back 200s linear infinite;
		-o-animation:move-twink-back 200s linear infinite;
		-webkit-animation:move-twink-back 200s linear infinite;
		animation:move-twink-back 200s linear infinite;
	}

	.earth {
		margin: 0px auto;
		background-image: url(https://1.bp.blogspot.com/-RQXOUcWXeY4/YQqM1mGwAjI/AAAAAAAADsc/-RME9sn_w_4xKFG63qk4ahUQSM-uuNgggCLcBGAsYHQ/s169/3dgifmaker04194.gif);
		background-position: 120% 70px, 0px 0px, 0px 0px;
		background-repeat: no-repeat, repeat-x, repeat-x;
		animation: animate-earth linear 50s infinite;
		-moz-animation: animate-earth linear 50s infinite;
		-ms-animation: animate-earth linear 50s infinite;
		-o-animation: animate-earth linear 50s infinite;
		-webkit-animation: animate-earth linear 50s infinite;
	}

	.mists{
	    background:transparent url(https://1.bp.blogspot.com/-Rnd-HA4DuTU/YPwRaNSl4YI/AAAAAAAADpE/2ZPg4lVTBL4tqNGS9I1MTurstpoLu0GmACLcBGAsYHQ/s768/mists.png) repeat top center;
		-moz-animation:move-mists-back 200s linear infinite;
		-ms-animation:move-mists-back 200s linear infinite;
		-o-animation:move-mists-back 200s linear infinite;
		-webkit-animation:move-mists-back 200s linear infinite;
		animation:move-mists-back 200s linear infinite;
	}
</style>


<nav class="navbar navbar-dark bg-transparent fixed-top">
  <a class="navbar-brand" href="index.php" style="color: #fff;">
  <a href="https://www.awgroupchannel.my.id/">Aw Group Channel</a>
  </a>
</nav>

<div class="stars"></div>
<div class="twinks"></div>
<div class="earth"></div>
<div class="mists"></div>

<div>
   <a href="https://kata-h.blogspot.com" ><img src="https://1.bp.blogspot.com/--0ri4CT3Cqc/YPwRAQal9KI/AAAAAAAADow/smGo0CKA4XwJmD2F5dKca7lWt-NjOcujwCLcBGAsYHQ/s208/pesawat.gif" alt="rocket" class="rocket" width="50px" /></a>
<marquee><b><span style="font-size: x-large;"><span style="color: #04ff00;">ALHIKMAH</span><span style="color: red;">.MY<span style="color: white;">.ID</span> <span style="color: white;"><b>MENGUCAPKAN<span style="color: red;"><b> DIRGAHAYU</b></span><span style="color: white;"><b> REPUBLIK</b></span> <span style="color: Red;">INDONESIA 🇮🇩🇮🇩🇮🇩  KE - 76</span></b></span>
</span></span></b></marquee>
<center><span style="font-size: x-large;"><span style="color: white;"><a href="https://www.alhikmah.my.id" >AL HIKMAH .MY .ID </a></span></span></center>
	<div>	© <?php echo date('Y'); ?> Copyright :
	    <a href="https://www.alhikmah.my.id/"> Alhikmah.my.id</a>
	</?php></div>
	<!--
	Copyright (c) 2021, Aw Score Code - AL HIKMAH [ Desain by : Aw Group Channel ] All rights reserved.
	For licensing, see LICENSE.html or https://kata-h.blogspot.com/p/license.html-->
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5295583488737876"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-5295583488737876"
     data-ad-slot="6408396068"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div>
<style type="text/css">
/* [SLIDER] */
#slider,  #slider .slide{
  width: 400px;
  height: 250px;
}
#slider {
  overflow: hidden;
  margin: 0 auto;
  font-size: 1.2em;
  background: withe;
}
#slider .container {
  position: relative;
  bottom: 0;
  right: 0;
  animation: slide-animation 30s infinite;
}
#slider .slide {
  position: relative;
  box-sizing: border-box;
  padding: 10px 20px;
}

/* [ANIMATION] */
@keyframes slide-animation {
  0% { 
    opacity: 0;
    bottom: 0;
  }
  11% {
    opacity: 1;
    bottom: 0; 
  }
  22% { bottom: 100%; }
  33% { bottom: 100%; }
  44% { bottom: 200%; }
  55% { bottom: 200%; }
  66% { bottom: 300%; }
  77% { bottom: 300%; }
  88% {
    opacity: 1;
    bottom: 400%; 
  }
  100% {
    opacity: 0;
    bottom: 400%;
  }
}
</style>

<a href="https://www.alhikmah.my.id/p/sitemap-kata-kata-hikmah_3.html" ><center><img border="0" data-original-height="400" data-original-width="400" height="200" src="https://1.bp.blogspot.com/-QxKSv_3al6U/YOkusbndOsI/AAAAAAAADi4/83MrRDm2OmE5BjhDCbZN8Ah7gPJZIRQfgCLcBGAsYHQ/s320/logo7_10_121837.png" /></center></a>
<div id="slider">
      <div class="container">
        <div class="slide">
          <h3>AL HIKMAH </h3>
          <p>
            <a href="https://kata-h.blogspot.com"><b><span style="color: #FFFFFF;">ALHIKMAH.MY.ID</span></b></a> <span style="color: #FFFFFF;">Merupakan Situs website islami yang menyajikan berbagai informasi , pendidikan , sosial , budaya , peran tokoh , sejarah , referensi kehidupan bermasyrakat dan bernegara.
</span>
           </p>
        </div>
        <div class="slide">
          <h3>Pengelola</h3>
          <p>
            <a href="https://kata-h.blogspot.com"><b><span style="color: #FFFFFF;">ALHIKMAH.MY.ID </span></b></a><span style="color: #FFFFFF;">ini dikelola oleh kang santri indonesia yang bekerjasama dengan pakar website awgroupchannel . Situs ALHIKMAH bisa Anda kunjungi melalui <a href="https://kata-h.blogspot.com"><b>www.alhikmah.my.id </b></a></span>
           </p>
        </div>
        <div class="slide">
          <h3>Kajian</h3>
          <p>
            <span style="color: #FFFFFF;">AL HIKMAH menyajikan berbagai referensi keagaman yang bersumber dari berbagai referensi seperti kitab - kitab karangan ulama'ul sholihin dan dan berbagai referensi lainnya.
           </span></p>
        </div>
        <div class="slide">
          <h3>Editing</h3>
          <p>
<span style="color: #FFFFFF;">
           Perumusan Konten Artikel , gambar , vidio , Desain , ini telah melaui beberapa tahan Pengeditan . 
           </span></p>
        </div>
        <div class="slide">
          <h3>Kontribusi</h3>
          <p>
          <a href="https://kata-h.blogspot.com"><b>ALHIKMAH.MY.ID</b></a><span style="color: #FFFFFF;"> juga membuka kesempatan untuk anda untuk berkontribusi guna membangun informasi yang bermanfaat.</span>
           </p>
        </div>
      </div>
    </div>
<!doctype html>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5295583488737876"
     crossorigin="anonymous"></script>
<!-- Display ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5295583488737876"
     data-ad-slot="2109828175"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
	


<div style="background-image: linear-gradient(-225deg, rgb(164, 69, 178) 0px, rgb(212, 24, 114) 52%, rgb(255, 0, 102) 100%); border-radius: 100px; box-shadow: rgba(62, 62, 62, 0.66) 1px 8px 5px -6px; color: white; float: left; font-size: 9px; letter-spacing: 0.8px; padding: 7px 10px; position: absolute; text-transform: uppercase; width: 89px; z-index: 1;">HEADLINE NEWS</div><div class="runningtext; color:#FE2E2E"><div class='spinner3'></div>
<script>//<![CDATA[
function RecentPostsScrollerv2(json){
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{sMoqueeHTMLStart = "\<marquee onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if( nWidth){sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";}else{sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";}if( nScrollDelay){sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}if(sDirection){sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
if(sDirection == "left" || sDirection =="right")
{//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = "&nbsp;&nbsp;";}else{//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";}}if(sOpenLinkLocation =="N")
{sPostLinkLocation = " target= \"_blank\" ";}else{sPostLinkLocation = " ";}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{objPost = json.feed.entry[nFeedCounter];for (var nCounter = 0; nCounter < objPost.link.length; nCounter++){if (objPost.link[nCounter].rel == 'alternate'){sPostURL = objPost.link[nCounter].href;
break;}}sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )}catch(exception)
{alert(exception);}}//]]></script>
<script> var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar=""; </script> <script src="/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2"></script></div></!doctype>


<style type="text/css">

.spiralContainer {
  border-radius: 50%;
  width:200px;
  height:200px;
  overflow:hidden;
  margin:20px;
  
  -webkit-animation: spin 3s linear 0s infinite reverse;
  -moz-animation: spin 3s linear 0s infinite reverse;  
  -ms-animation: spin 3s linear 0s infinite reverse;
  -o-animation: spin 3s linear 0s infinite reverse;
  animation: spin 3s linear 0s infinite reverse;
  
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;  
  animation-play-state: paused;
}
.spiral {
  width:200px;
  height:200px;
  border-radius: 50%;
  background-image: url(https://www.iwa.id/ribbon/iwa-sotm-badge.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 6s linear 0s infinite normal;
  -moz-animation: spin 6s linear 0s infinite normal;
  -ms-animation: spin 6s linear 0s infinite normal;
  -o-animation: spin 6s linear 0s infinite normal;
  animation: spin 6s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}

</style>
<!-- NOTE: In Chrome there is a brief glitch during the transition after the first one -->
<center><a href="https://www.iwa.id/2021/aug/alhikmah-my-id"/><div class='spiralContainer'><div class='spiral'></div></div></a></center></div></!doctype>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5295583488737876"
     crossorigin="anonymous"></script>
<!-- Iklan gratis -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5295583488737876"
     data-ad-slot="6648059473"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><!doctype html>


    
     
     
    CSS 3D IMAGE ISLAMI
    
    <script>
    var url = "https://kata-h.blogspot.com/"; // url tujuan
    var count = 10; // dalam detik
    function countDown() {
    if (count > 0) {
    count--;
    var waktu = count + 1;
    $('#kata').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
    setTimeout("countDown()", 1000);
    } else {
    window.location.href = url;
    }
    }
    countDown();
    </script>
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css" />
    
    <!--Only for demo purpose - no need to add.-->
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
	
<style type="text/css">
body{
  background: green;
}
.contenedor {
  -webkit-perspective: 500px;
  perspective: 500px;
  perspective-origin: 50% 50%;
}

.cube, .cube .card{
  height: 290px;
  width: 290px;
}

.cube {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transform: rotateX(-30deg) rotateY(30deg);
  transform: rotateX(-30deg) rotateY(-30deg);

  margin: 150px auto;

  -webkit-animation: giro 20s infinite linear;
  animation: giro 20s infinite linear;
}

.cube .card {
  position: absolute;
  border: 5px solid #ccc;
  opacity: 0.85;
  transition: 0.2s;
}
/* Pause animation on hover */
.cube:hover{
    animation-play-state: paused;
}
.cube:hover .card{
   opacity: 1;
   transition: 0.2s;
}

/*card frontal*/
.cube .card:nth-child(1) {
  -webkit-transform: translateZ(150px);
  transform: translateZ(150px);
}
/*card posterior*/
.cube .card:nth-child(2) {
  -webkit-transform: rotateY(180deg) translateZ(150px);
  transform: rotateY(180deg) translateZ(150px);
}
/*card izquierda*/
.cube .card:nth-child(3) {
  -webkit-transform: rotateY(-90deg) translateZ(150px);
  transform: rotateY(-90deg) translateZ(150px);
}
/*card derecha*/
.cube .card:nth-child(4) {
  -webkit-transform: rotateY(90deg) translateZ(150px);
  transform: rotateY(90deg) translateZ(150px);
}
/*card superior*/
.cube .card:nth-child(5) {
  -webkit-transform: rotateX(90deg) translateZ(150px);
  transform: rotateX(90deg) translateZ(150px);
}
/*card inferior*/
.cube .card:nth-child(6) {
  -webkit-transform: rotateX(-90deg) translateZ(150px);
  transform: rotateX(-90deg) translateZ(150px);
}

@-webkit-keyframes giro {
    0% { -webkit-transform: rotateX(-45deg) rotateY(0deg); }
    50% { -webkit-transform: rotateX(45deg) rotateY(360deg); }
    100% { -webkit-transform: rotateX(-45deg) rotateY(720deg); }
}

@keyframes giro {
    0% { transform: rotateX(-45deg) rotateY(0deg); }
    50% { transform: rotateX(45deg) rotateY(360deg); }
    100% { transform: rotateX(-45deg) rotateY(720deg); }
}

@-webkit-keyframes giro360 {
    0% { -webkit-transform: rotateX(  0deg) rotateY(  0deg); }
  100% { -webkit-transform: rotateX(360deg) rotateY(360deg); }
}

@keyframes giro360 {
    0% { transform: rotateX(  0deg) rotateY(  0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}
</style>



		
<div class="ScriptTop">
    <div class="rt-container">
        <div class="col-rt-4" id="float-right">

            <!-- AD HERE -->
            
        </div>
        <div class="col-rt-2">
            <ul>
                <li><a href="https://kata-h.blogspot.com"> AL HIKMAH</a></li>
            </ul>
        </div>
    </div>
</div>

<header class="ScriptHeader">
    <div class="rt-container">
    	<div class="col-rt-12">
        	<div class="rt-heading">
            	<h1>CSS 3D IMAGE ISLAMI</h1>
                <p>Cube animated clickable images with CSS3</p>
            desain by <a href="https://kata-h.blogspot.com"> AL HIKMAH</a>
            </div>
            </div>
        </div>
    
</header>

<section>
    <div class="rt-container">
          <div class="col-rt-12">
              <div class="Scriptcontent">
              
<!-- partial:index.partial.html -->
<div class="contenedor"> 
			<div class="cube">
				<div class="card">
                    <a href="https://www.alhikmah.my.id/search/label/SHOLAWAT?m=1">
					<img src="https://4.bp.blogspot.com/-D2onv2ZTYMM/Wx-rxl5Vl8I/AAAAAAAALuA/kbWusxshfeUyEBDp1TzW9KXRaXud9uDegCLcBGAs/s1600/10356692_10153065521447125_7960960576663210449_n.jpg" title="makkah" alt="makkah" height="290px" width="290px" />
				  </a>
                        </div>
				<div class="card">
                    <a href="https://www.alhikmah.my.id/search/label/Islam?m=1">
					<img src="https://1.bp.blogspot.com/-oSgmmkc-lmc/Wx-rnpeS11I/AAAAAAAALto/e5pBOosoRUUKlGtslqW8KIFlKfoB4nxkgCLcBGAs/s1600/madina-shareef-86-1.jpg" title="kaligrafi" alt="kaligrafi" width="290px" height="290px" />
				  </a>
                        </div>
				<div class="card">
                    <a href="https://www.alhikmah.my.id/search/label/KISAH%20HIKMAH?m=1">
					<img src="https://3.bp.blogspot.com/-Vm7U3Fjh_yo/W6ug62ygLLI/AAAAAAAAL2c/11IjIGC7Sgopjb_VWWidlMkOnPoVs9-uQCLcBGAs/s1600/8.jpg" title="MASJID" alt="MASJID" width="290px" height="290px" />
				  </a>
                        </div>
				<div class="card">
                    <a href="https://www.alhikmah.my.id/search/label/media%20dakwah?m=1">
					<img src="https://2.bp.blogspot.com/-82UKjAlNvA4/W6ug114p0rI/AAAAAAAAL2I/dB7jAFbc3qYavy0f4DrzFiIvc3fkML23gCLcBGAs/s1600/3.jpg" title="masjid " alt="masjid " width="290px" height="290px" />
				  </a>
                        </div>
				<div class="card">
                    <a href="https://kata-h.blogspot.com">
					<img src="https://cdn.pixabay.com/photo/2015/08/11/16/27/islam-884825__480.jpg" title="AL HIKMAH" alt="AL HIKMAH" width="290px" height="290px" />
				  </a>
                        </div>
				<div class="card">
                    <a href="https://www.alhikmah.my.id/2020/10/kisah-kisah-25-nabi-dan-rasul-berserta.html?m=1">
					<img src="https://1.bp.blogspot.com/-QxKSv_3al6U/YOkusbndOsI/AAAAAAAADi4/83MrRDm2OmE5BjhDCbZN8Ah7gPJZIRQfgCLcBGAsYHQ/s320/logo7_10_121837.png" title="padang pasir" alt="Padang Pasir" width="290px" height="290px" />
                    </a>
				</div>
                    
			</div>
		</div>
<!-- partial -->
    		<script>
    		var url = "https://kata-h.blogspot.com/"; // url tujuan
    		var count = 25; // dalam detik
    		function countDown() {
    		if (count > 0) {
    		count--;
    		var waktu = count + 1;
    		$('#kata').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
    		setTimeout("countDown()", 1000);
    		} else {
    		window.location.href = url;
    		}
    		}
    		countDown();
    		</script>
           
    		</div>
		</div>
    </div>
</section>
     <!--
     Copyright (c) 2021, Aw Score Code-Neumorphic form Twiter- AL HIKMAH [ Desain by : Aw Group Channel ] All rights reserved.
     For licensing, see LICENSE.html or https://kata-h.blogspot.com/p/license.html-->
     

   <!-- ANALYTICS -->

	
</!doctype><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5295583488737876"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-da+90-31-8m+r7"
     data-ad-client="ca-pub-5295583488737876"
     data-ad-slot="1731114024"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="player"></div>
    <script>
      // 1. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 2. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          playerVars: {
                    autoplay: 1,
                    loop: 1,
                    controls: 0,
                    showinfo: 0,
                    autohide: 1,
                    modestbranding: 1,
                    vq: 'hd1080'},
          videoId: '1D8x2SvHb8w',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 3. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
      }

      var done = false;
      function onPlayerStateChange(event) {
        
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5295583488737876"
     crossorigin="anonymous"></script>
<!-- Adsense Horizontal -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5295583488737876"
     data-ad-slot="4653012258"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><style type="text/css">
/*Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Wdit Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
</style><script async src="https://cse.google.com/cse.js?cx=792e1c207270e2810"></script>
<div class="gcse-search"></div>

<script async src="https://cse.google.com/cse.js?cx=db5f08cfff3041318"></script>
<div class="gcse-search"></div><div expr:id='"ads1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5295583488737876"
     crossorigin="anonymous"></script>
<!-- Display ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5295583488737876"
     data-ad-slot="2109828175"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div expr:id='"ads2" + data:post.id'><data:post.body/></data:post.body></div>
<script type="text/javascript">
var obj0=document.getElementById("ads1<data:post.id/>");
var obj1=document.getElementById("ads2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script><div style="text-align: center;"> 
<b><a href="http://www.awgroupchannel.my.id/" target="_blank">
<span style="font-size: large;">HTML Editor</span></a></b></div>
 <form method="post" name="form1"> 
 <textarea name="code" onclick="focus(this.code)" style="border: solid 1px #cccccc; box-shadow: 5px 5px 5px #CCCCCC; color: black; font-family: Courier New, Monospace, Courier; font-size: 14px; font-weight: normal; height: 200px; margin: 0px; padding: 5px; scroll: auto; width: 100%;"></textarea></form>
  <div style="text-align: center;"> 
  <button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Preview</button>
  <button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Clear </button>
  <span style="color: white;"></span></div> 
  <div style="text-align: center;"> 
  <span style="color: white;"></span></div> 
  <div style="text-align: center;"> </div>
  <span style="color: white;">
  <iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border: solid 1px #cccccc; box-shadow: 5px 5px 5px #CCCCCC; height: 400px; padding: 5px; scroll: auto; width: 95%;"></iframe></span>

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script><amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-5295583488737876"
     data-ad-slot="2109828175"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad><header>
   <link href="https://fonts.googleapis.com/css2?family=Lato&amp;display=swap" rel="stylesheet" />
</header>
<style type="text/css">
body {
  background: #e0e5ec;
}
h1 {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 50px;
  font-family: "Cormorant Garamond", serif;
}

p {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 18px;
  color: #676767;
}
.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

/* 1 */
.btn-1 {
  background: rgb(6,14,131);
  background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
  border: none;
}
.btn-1:hover {
   background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}

/* 2 */
.btn-2 {
  background: rgb(96,9,240);
  background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
  border: none;
  
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:hover {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}


/* 3 */
.btn-3 {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover{
   background: transparent;
  box-shadow: none;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:hover{
   color: rgba(2,126,251,1);
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}

/* 4 */
.btn-4 {
  background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-4:hover{
  background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-4:before,
.btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
   box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.9),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}
.btn-4:before {
  height: 0%;
  width: .1px;
}
.btn-4:after {
  width: 0%;
  height: .1px;
}
.btn-4:hover:before {
  height: 100%;
}
.btn-4:hover:after {
  width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.9),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}
.btn-4 span:before {
  width: .1px;
  height: 0%;
}
.btn-4 span:after {
  width: 0%;
  height: .1px;
}
.btn-4 span:hover:before {
  height: 100%;
}
.btn-4 span:hover:after {
  width: 100%;
}

/* 5 */
.btn-5 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  background: rgb(255,27,0);
background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}
.btn-5:hover {
  color: #f0094a;
  background: transparent;
   box-shadow:none;
}
.btn-5:before,
.btn-5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #f0094a;
  box-shadow:
   -1px -1px 5px 0px #fff,
   7px 7px 20px 0px #0003,
   4px 4px 5px 0px #0002;
  transition:400ms ease all;
}
.btn-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
  width:100%;
  transition:800ms ease all;
}


/* 6 */
.btn-6 {
  background: rgb(247,150,192);
background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-6:before,
.btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 1px;
 box-shadow:
   -1px -1px 20px 0px rgba(255,255,255,1),
   -4px -4px 5px 0px rgba(255,255,255,1),
   7px 7px 20px 0px rgba(0,0,0,.4),
   4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.btn-6:hover{
  background: transparent;
  color: #76aef1;
  box-shadow: none;
}
.btn-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.btn-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {
  position: absolute;
  content: "";
  box-shadow:
   -1px -1px 20px 0px rgba(255,255,255,1),
   -4px -4px 5px 0px rgba(255,255,255,1),
   7px 7px 20px 0px rgba(0,0,0,.4),
   4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.btn-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.btn-6 span:hover:before {
  width: 100%;
}
.btn-6 span:hover:after {
  width: 100%;
}

/* 7 */
.btn-7 {
background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-7:before,
.btn-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7:before{
   height: 0%;
   width: 2px;
}
.btn-7:after {
  width: 0%;
  height: 2px;
}
.btn-7:hover{
  color: rgba(251,75,2,1);
  background: transparent;
}
.btn-7:hover:before {
  height: 100%;
}
.btn-7:hover:after {
  width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7 span:before {
  width: 2px;
  height: 0%;
}
.btn-7 span:after {
  height: 2px;
  width: 0%;
}
.btn-7 span:hover:before {
  height: 100%;
}
.btn-7 span:hover:after {
  width: 100%;
}

/* 8 */
.btn-8 {
  background-color: #f0ecfc;
background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-8 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-8:before,
.btn-8:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #c797eb;
  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
  transition: all 0.3s ease;
}
.btn-8:before{
   height: 0%;
   width: 2px;
}
.btn-8:after {
  width: 0%;
  height: 2px;
}
.btn-8:hover:before {
  height: 100%;
}
.btn-8:hover:after {
  width: 100%;
}
.btn-8:hover{
  background: transparent;
}
.btn-8 span:hover{
  color: #c797eb;
}
.btn-8 span:before,
.btn-8 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #c797eb;
  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
  transition: all 0.3s ease;
}
.btn-8 span:before {
  width: 2px;
  height: 0%;
}
.btn-8 span:after {
  height: 2px;
  width: 0%;
}
.btn-8 span:hover:before {
  height: 100%;
}
.btn-8 span:hover:after {
  width: 100%;
}
  

/* 9 */
.btn-9 {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background-color: #1fd1f9;
background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
  transition: all 0.3s ease;
}
.btn-9:hover {
  background: transparent;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;
}
.btn-9:hover:after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 10 */
.btn-10 {
  background: rgb(22,9,240);
background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-10:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  -webkit-transform: scale(.1);
  transform: scale(.1);
}
.btn-10:hover {
  color: #fff;
  border: none;
  background: transparent;
}
.btn-10:hover:after {
  background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 11 */
.btn-11 {
  border: none;
  background: rgb(251,33,117);
    background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
    color: #fff;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .7;
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


/* 12 */
.btn-12{
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.btn-12 span {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  border-radius: 5px;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.btn-12 span:nth-child(1) {
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}


/* 13 */
.btn-13 {
  background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
  border: none;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
   background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}


/* 14 */
.btn-14 {
  background: rgb(255,151,0);
  border: none;
  z-index: 1;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #eaf818;
  background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: #000;
}
.btn-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-14:active {
  top: 2px;
}

/* 15 */
.btn-15 {
  background: #b621fe;
  border: none;
  z-index: 1;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: #663dff;
  border-radius: 5px;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}


/* 16 */
.btn-16 {
  border: none;
  color: #000;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-16:hover {
  color: #000;
}
.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-16:active {
  top: 2px;
}
</style>
<h1><span style="color: #FFFFFF;">LABEL</span></h1>
<p><span style="color: #FFFFFF;">BERIKUT INI MERUPAKAN DAFTAR YANG AL HIKMAH SAJIKAN DISITUS AL HIKMAH.MY.ID SEMOGA BISA BERMANFAAT</span></p>
<div class="frame">
  <a href="https://www.alhikmah.my.id/search/label/PENDIDIKAN?m=1">
  <button class="custom-btn btn-1">BELAJAR</button></a>
  <a href="https://www.alhikmah.my.id/search/label/Sejarah?m=1">
  <button class="custom-btn btn-2">SEJARAH</button></a>
  <a href="https://www.alhikmah.my.id/search/label/SOSIAL?m=1">
  <button class="custom-btn btn-3"><span>SOSIAL</span></button></a>
  <a href="https://www.alhikmah.my.id/search/label/BUDAYA?m=1">
  <button class="custom-btn btn-4"><span>BUDAYA</span></button></a>
  <a href="https://www.alhikmah.my.id/search/label/Tokoh?m=1">
  <button class="custom-btn btn-5"><span>TOKOH</span></button></a>
  <a href="https://www.alhikmah.my.id/search/label/INFORMASI?m=1">
  <button class="custom-btn btn-6"><span>INFORMASI</span></button></a>
  <a href="https://www.alhikmah.my.id/search/label/TEKNOLOGI?m=1">
  <button class="custom-btn btn-7"><span>TEKNOLOGI</span></button></a>
  <a href="">
  <button class="custom-btn btn-8"><span>ISLAM</span></button></a>
  <a href="https://www.alhikmah.my.id/search/label/KISAH%20HIKMAH?m=1">
  <button class="custom-btn btn-9">KISAH</button></a>
  <a href="https://www.alhikmah.my.id/search/label/KITAB%2FBUKU?m=1">
  <button class="custom-btn btn-10">KITAB</button></a>
  <a href="https://www.alhikmah.my.id/search/label/media%20dakwah?m=1">
  <button class="custom-btn btn-11">DAKWAH<div class="dot"></div></button></a>
  <a href="https://www.alhikmah.my.id/search/label/SHOLAWAT?m=1">
  <button class="custom-btn btn-12"><span>Click!</span><span>SHOLAWAT</span></button></a>
  <a href="https://www.alhikmah.my.id/p/blog-page_5.html">
  <button class="custom-btn btn-13">JADWAL</button></a>
  <a href="https://www.alhikmah.my.id/p/license.html">
  <button class="custom-btn btn-14">Licensi</button></a>
  <a href="https://kata-h.blogspot.com/p/login_25.html">
  <button class="custom-btn btn-15">LOGIN</button></a>
  <a href="https://forms.gle/rZqhBfBLZnoraUMg8">
  <button class="custom-btn btn-16">DAFTAR</button></a>
  <p style="font-family: Andale Mono, monospace;">
    AL HIKMAH.Style DESIGNING</p>
</div>

<a href="https://www.exabytes.co.id/web-hosting/membuat-website?aff=8303039"><img src="https://www.exabytes.co.id/images/affiliate/hosting/336x280-COID-webhosting.jpg" width="336" height="280" border="0" /></a><p style="margin-top:10px; margin-bottom:0; padding-bottom:0; text-align:center; line-height:0"><a target="_blank" href="http://feeds.feedburner.com/~r/blogspot/vrkpf/~6/4"><img src="http://feeds.feedburner.com/blogspot/vrkpf.4.gif" alt="AL HIKMAH" style="border:0" /></a></p><p style="margin-top:5px; padding-top:0; font-size:x-small; text-align:center"><a href="https://feedburner.google.com/fb/a/headlineanimator/install?id=7svjecfb8p9mfpuj760bo77e24&amp;w=4" onclick="window.open(this.href, 'haHowto', 'width=520,height=600,toolbar=no,address=no,resizable=yes,scrollbars'); return false" target="_blank">&uarr; Grab this Headline Animator</a></p><script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  window.OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "4550b225-ede0-47fb-b8c0-a149faf7968e",
    });
  });
</script><script async src="https://cse.google.com/cse.js?cx=792e1c207270e2810"></script>
<div class="gcse-search"></div>
<!-- Default Statcounter code for AL HIKMAH https://www.alhikmah.my.id -->
<script type="text/javascript">
var sc_project=12625991; 
var sc_invisible=1; 
var sc_security="7c1cb60a"; 
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img class="statcounter" 
src="https://c.statcounter.com/12625991/0/7c1cb60a/1/" alt="Web Analytics" 
referrerpolicy="no-referrer-when-downgrade" /></a></div></noscript>
<!-- End of Statcounter Code -->
<a href="https://statcounter.com/p12625991/?guest=1">AL HIKMAH</a>  <!-- www.alhikmah.my.id  (div with counter) --><div id="histats_counter"></div>
<!-- www.alhikmah.my.id  START  (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4587936,4,111,175,25,00011111']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="www.alhikmah.my.id" target="_blank"><img src="//sstatic1.histats.com/0.gif?4587936&amp;101" alt="" border="0" /></a></noscript>
<!-- www.alhikmah.my.id  END  --><center><a href="http://www.blogger.com/follow-blog.g?blogID=392213471435482065" target="_blank" title="Follow My Blog"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhZo9w7yUEUyMZfWlEMwdLc5U6GgokdTUjEE2yH-MC7KtEPQtYWMaDdwenBNV-xPWOC9UZnOAob3hW7SiE0p46VzuArpYDjqFyAOEttFvL8r_OYnZHk8A-wzn6EoR3RucYBEjPngQboVFW3JLSAEaxt8j63jmjQqQyHvo4LRWxR907H75wEpCLAPoUSvg=s109" alt="Follow My Blog" /></a></center>