DEV Community

Cover image for Animation 3D Free Code
Ahmad Wahyudi
Ahmad Wahyudi

Posted on

Animation 3D Free Code

<!doctype html>

Animasi Dirgahayu Indonesia

@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;
}
Enter fullscreen mode Exit fullscreen mode


Aw Group Channel

rocket
ALHIKMAH.MY.ID MENGUCAPKAN DIRGAHAYU REPUBLIK INDONESIA 🇮🇩🇮🇩🇮🇩 KE - 76

AL HIKMAH .MY .ID

© Copyright :
Alhikmah.my.id
?php>
 (adsbygoogle = window.adsbygoogle || []).push({});
Enter fullscreen mode Exit fullscreen mode

/* [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%;
}
}

      <h3>AL HIKMAH </h3>
      <p>
        <a href="https://kata-h.blogspot.com"><b><span>ALHIKMAH.MY.ID</span></b></a> <span>Merupakan Situs website islami yang menyajikan berbagai informasi , pendidikan , sosial , budaya , peran tokoh , sejarah , referensi kehidupan bermasyrakat dan bernegara.
Enter fullscreen mode Exit fullscreen mode
      <h3>Pengelola</h3>
      <p>
        <a href="https://kata-h.blogspot.com"><b><span>ALHIKMAH.MY.ID </span></b></a><span>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>


      <h3>Kajian</h3>
      <p>
        <span>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>


      <h3>Editing</h3>
      <p>
Enter fullscreen mode Exit fullscreen mode


Perumusan Konten Artikel , gambar , vidio , Desain , ini telah melaui beberapa tahan Pengeditan .

      <h3>Kontribusi</h3>
      <p>
      <a href="https://kata-h.blogspot.com"><b>ALHIKMAH.MY.ID</b></a><span> juga membuka kesempatan untuk anda untuk berkontribusi guna membangun informasi yang bermanfaat.</span>
       </p>









 (adsbygoogle = window.adsbygoogle || []).push({});
Enter fullscreen mode Exit fullscreen mode

HEADLINE NEWS
//<![CDATA[
function RecentPostsScrollerv2(json){
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{sMoqueeHTMLStart = "&lt;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 = "&lt;br/&gt;";}}if(sOpenLinkLocation =="N")
{sPostLinkLocation = " target= \"_blank\" ";}else{sPostLinkLocation = " ";}
sMoqueeHTMLEnd = "&lt;/MARQUEE&gt;"
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 + "&lt;b&gt;"+sBulletChar+"&lt;/b&gt; &lt;a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "&lt;/a&gt;" + sHeadlineTerminator;
}document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )}catch(exception)
{alert(exception);}}//]]>
var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar=""; !doctype>

.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); }
}

!doctype>
 (adsbygoogle = window.adsbygoogle || []).push({});






CSS 3D IMAGE ISLAMI


var url = "https://kata-h.blogspot.com/"; // url tujuan
var count = 10; // dalam detik
function countDown() {
if (count &gt; 0) {
count--;
var waktu = count + 1;
$('#kata').html('&lt;b&gt;Halaman Ini Akan Otomatis Di Redirect KE &lt;/b&gt; ' + url + ' dalam ' + waktu + ' detik.');
setTimeout("countDown()", 1000);
} else {
window.location.href = url;
}
}
countDown();
Enter fullscreen mode Exit fullscreen mode

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); }
}

        <ul>
            <li><a href="https://kata-h.blogspot.com"> AL HIKMAH</a></li>
        </ul>








            <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>















                <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">
              </a>


                <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">
              </a>


                <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">
              </a>


                <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 ">
              </a>


                <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">
              </a>


                <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">
                </a>






        var url = "https://kata-h.blogspot.com/"; // url tujuan
        var count = 25; // dalam detik
        function countDown() {
        if (count &gt; 0) {
        count--;
        var waktu = count + 1;
        $('#kata').html('&lt;b&gt;Halaman Ini Akan Otomatis Di Redirect KE &lt;/b&gt; ' + url + ' dalam ' + waktu + ' detik.');
        setTimeout("countDown()", 1000);
        } else {
        window.location.href = url;
        }
        }
        countDown();
Enter fullscreen mode Exit fullscreen mode
 <!--
 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-->
Enter fullscreen mode Exit fullscreen mode

<!-- ANALYTICS -->

</!doctype> crossorigin="anonymous">
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">

 (adsbygoogle = window.adsbygoogle || []).push({});
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode
 (adsbygoogle = window.adsbygoogle || []).push({});
Enter fullscreen mode Exit fullscreen mode

/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}

 (adsbygoogle = window.adsbygoogle || []).push({});
Enter fullscreen mode Exit fullscreen mode

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);}


HTML Editor

Preview
Clear


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;
}

LABEL

BERIKUT INI MERUPAKAN DAFTAR YANG AL HIKMAH SAJIKAN DISITUS AL HIKMAH.MY.ID SEMOGA BISA BERMANFAAT


BELAJAR


SEJARAH


SOSIAL


BUDAYA


TOKOH


INFORMASI


TEKNOLOGI


ISLAM


KISAH


KITAB


DAKWAH


Click!SHOLAWAT


JADWAL


Licensi


LOGIN


DAFTAR


AL HIKMAH.Style DESIGNING

AL HIKMAH

↑ Grab this Headline Animator

window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "4550b225-ede0-47fb-b8c0-a149faf7968e",
});
});

var sc_project=12625991;
var sc_invisible=1;
var sc_security="7c1cb60a";

Web Analytics

AL HIKMAH <!-- www.alhikmah.my.id (div with counter) -->

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);
})();

<!-- www.alhikmah.my.id END -->

Follow My Blog

Discussion (0)