AWDEV

Posted on Oct 23, 2021

Animation 3D Free Code

#html #css #tutorial #github

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

Aw Group Channel

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

AL HIKMAH .MY .ID
© Copyright :
Alhikmah.my.id
?php>

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

/* [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.

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

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

HEADLINE NEWS
//<![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 = "  ";}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);}}//]]>
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();

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

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

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

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

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

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

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

↑ 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";

AL HIKMAH

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

DEV Community

Animation 3D Free Code

slider, #slider .slide{

slider {

slider .container {

slider .slide {

LABEL

Top comments (0)

Read next

How to Make a Retro 2D JavaScript Game Part 2

Mastering HTML: From Basics to Intermediate Level

Async Pipeline Haystack Streaming over FastAPI Endpoint

Generating Permalinks in VS Code Using hogashi.vscode-copy-github-permalink