• Home
  • Cara Download

    • Kamis, 02 Februari 2017

    Kumpulan Efek Hover 2D Keren Menggunakan CSS


    Kumpulan Efek Hover 2D Keren Menggunakan CSS
    Kumpulan Efek Hover 2D Keren Menggunakan CSS
    Sebelumnya saya sudah membahas mengenai Kumpulan Efek Hover Background Transisi Menggunakan CSS Anda bisa melihatnya Klik Ini. Nah pada postingan kali ini, saya akan membahas tentang berbagai macam efek hover menggunakan CSS. Efek ini bisa anda terapkan diberbagai macam objek seperti gambar, tombol, dan lainnya. Tidak perlu berlama-lama langsung contoh efek dibawah ini.

     Arahkan atau dekatkan kursor ke kotak

    2D Transitions || By : Moh. Syairi

    GROW
    SHRINK
    Bounce In
    Bounce Out
    Rotate
    Grow Rotate
    Float
    Sink
    Lalu begaimana cara membuatnya.?? Kita langsung saja.
    • Efek Grow (Membesar)
    GROW
    <style> #grow{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;} #grow:hover, .grow:focus, .grow:active {-webkit-transform: scale(1.1);transform: scale(1.1);background-color:#28CADA;} </style> <div id="grow" style="float:left">GROW</div>
    • Efek Shrink (Mengecil)
    SHRINK
    <style> #shrink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;} #shrink:hover, .shrink:focus, .shrink:active {-webkit-transform: scale(0.9);transform: scale(0.9);background-color:#28CADA;} </style> <div id="shrink" style="float:left">SHRINK</div>
    • Efek Bounce In (Memantul Masuk)
    BOUNCE IN
    <style> #Bounce_In{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;} #Bounce_In:hover, .Bounce_In:focus, .Bounce_In:active {-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;} </style> <div id="Bounce_In" style="float:left">BOUNCE IN</div>
    • Efek Bounce Out (Memantul keluar)
    BOUNCE OUT
    <style> #Bounce_Out{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;} #Bounce_Out:hover, .Bounce_Out:focus, .Bounce_Out:active { -webkit-transform: scale(0.8);transform: scale(0.8);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;} </style> <div id="Bounce_Out" style="float:left">BOUNCE OUT</div>
    • Efek Rotate (Memutar)
    ROTATE
    <style> #Rotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;} #Rotate:hover, .Rotate:focus, .Rotate:active {-webkit-transform: rotate(4deg);transform: rotate(4deg);background-color:#28CADA;} </style> <div id="Rotate" style="float:left">ROTATE</div>
    • Efek Grow Rotate (Membesar Memutar)
    GROW ROTATE
    <style> #GrowRotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;} #GrowRotate:hover, .GrowRotate:focus, .GrowRotate:active { -webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);background-color:#28CADA;} </style> <div id="GrowRotate" style="float:left">GROW ROTATE</div>
    • Efek Float (Keatas)
    FLOAT
    <style> #float{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;} #float:hover, .float:focus, .float:active {-webkit-transform: translateY(-8px);transform: translateY(-8px);background-color:#28CADA;} </style> <div id="float" style="float:left">FLOAT</div>
    • Efek Sink (kebawah)
    SINK
    <style> #sink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;} #sink:hover, .sink:focus, .sink:active { -webkit-transform: translateY(8px);transform: translateY(8px);background-color:#28CADA;} </style> <div id="sink" style="float:left">SINK</div>
    Sekian pembahasan Kumpulan Efek Hover 2D Keren Menggunakan CSS , Dilain pembahasan insyaAllah saya akan membahas efek hover yang lainnya. Semoga artikel ini bermanfaat dan menambah wawasan teman-teman.

    Diposting oleh di Tidak ada komentar:
    Label: , , , , ,

    Jumat, 27 Januari 2017

    Kumpulan Efek Hover Background Transisi Menggunakan CSS

    Kumpulan Efek Hover Background Transisi Menggunakan CSS
    Kumpulan Efek Hover Background Transisi Menggunakan CSS

    Pada postingan artikel ini saya membahas mengenai efek-efek hover background transisi yang designnya menggunakan CSS. Cara kerja efek hover ini, yaitu jika kursor diarahkan diatas objek, maka akan memberikan aksi background sesuai efek hover yang diberikan kepada objek tersebut. Anda bisa menerapkan efek hover ini pada objek apapun, seperti background, tombol download, dan lainnya. lebih jelasnya anda bisa mencoba demo dibawah ini.

    DEMO ( arahkan KURSOR ke TOMBOL dibawah ini )

    Background Transitions || By : Moh. Syairi

    Fade
    Sweep To Right
    Sweep To Left
    Sweep To Bottom
    Sweep To Top
    Bounce To Top
    Bounce To Bottom
    Bounce To Right
    Bounce To Left
    Radial Out
    Radial In
    Shutter In Horizontal
    Shutter Out Horizontal
    Shutter In Vertical
    Shutter Out Vertical

    Jika kursor diarahkan ketombol, maka akan muncul efeknya. Lalu bagaimana cara membuatnya, berikut adalah step penerapan efek menggunakan CSS.

    Kode HTML-nya

    Sebelum memberikan efek CSS, Anda buat terlebih dahulu HTML sebagai kerangka yang nanti akan memanggil CLASS dan ID pada kode CSS. Berikut adalah kode HTML-nya.
    <div class="BOX" id="FADE">Fade</div>
    Keterangan : Kode warna merah (ID) diganti ID yang berada di CSS sesuai efek yang Anda inginkan.

    Kode CSS-nya

    Setelah itu, Anda beri kode CSS sesuai efek hover yang diinginkan. Berikut adalah kode CSS-nya.

    Efek Background Fade Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #FADE{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color;} #FADE:hover{background-color: #2098d1;color: white;}
    Efek Background Sweep To Right Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #STR{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STR:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STR:hover{color: white;}#STR:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}
    Efek Background Sweep To Left Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #STL{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STL:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STL:hover{color: white;}#STL:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}
    Efek Background Sweep To Bottom Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #STB{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STB:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STB:hover{color: white;}#STB:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}
    Efek Background Sweep To Top Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #STT{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STT:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STT:hover{color: white;}#STT:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}
    Efek Background Bounce To Top Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #BTT{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTT:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTT:hover{color: white;}#BTT:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}
    Efek Background Bounce To Bottom Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #BTB{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTB:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTB:hover{color: white;}#BTB:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}
    Efek Background Bounce To Right Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #BTR{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTR:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTR:hover{color: white;}#BTR:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}
    Efek Background Bounce To Left Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #BTL{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTL:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTL:hover{color: white;}#BTL:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}
    Efek Background Radial Out Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #RDO{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #RDO:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #RDO:hover{ color: white; } #RDO:hover:before{ -webkit-transform: scale(2); transform: scale(2); }
    Efek Background Radial In Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #RDI{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #RDI:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #RDI:hover{ color: white; } #RDI:hover:before{ -webkit-transform: scale(0); transform: scale(0); }
    Efek Background Shutter In Horizontal Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #SIH { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SIH:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SIH:hover, #SIH:focus, #SIH:active { color: white; } #SIH:hover:before, #SIH:focus:before, #SIH:active:before { -webkit-transform: scaleX(0); transform: scaleX(0);}
    Efek Background Shutter Out Horizontal Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #SOH { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SOH:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SOH:hover, #SOH:focus, #SOH:active { color: white; } #SOH:hover:before, #SOH:focus:before, #SOH:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }
    Efek Background Shutter In Vertical Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #SIV { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SIV:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SIV:hover, #SIV:focus, #SIV:active { color: white; } #SIV:hover:before, #SIV:focus:before, #SIV:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); }
    Efek Background Shutter Out Vertical Transition
    .BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
    #SOV { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SOV:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SOV:hover, #SOV:focus, #SOV:active { color: white; } #SOV:hover:before, #SOV:focus:before, #SOV:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); }

    Silahkan pilih salah satu efek pada kode CSS diatas sesuai keinginan Anda. Jangan dibuat susah, karena pada dasarnya gampang. Jika Anda masih bingung dengan cara penerapannya, lebih jelas kerangka kode lengkapnya sebagai berikut :

    <style>
    Letakkan kode CSS-nya disini
    </style>
    Letakkan kode HTML-nya disini

    Note : Letakkan kode seperti kerangka diatas.

    Sekian pembahasan Kumpulan Efek Hover Background Transisi Menggunakan CSS, Dilain pembahasan insyaAllah saya akan membahas efek hover yang lainnya. Semoga artikel ini bermanfaat dan menambah wawasan teman-teman.

    Diposting oleh di Tidak ada komentar:
    Label: , , , , , ,

    Sabtu, 07 Januari 2017

    Unleash Your Other 90% (Realisasikan 90% Potensi Tersembunyi Anda)

    Unleash Your Other 90% (Realisasikan 90% Potensi Tersembunyi Anda)
    Unleash Your Other 90% (Realisasikan 90% Potensi Tersembunyi Anda)

    Kecerdasan dan spirit adalah potensi manusia yang paling menakjubkan. Tetapi, sabagian besar dari kita menggunakan 10% potensi tersebut. Ibaratnya, pada waktu lahir, kita telah diberi potensi pesawat jet, tetapi yang kita lakukan adalah hanya mengelap sayap dan memnaskan mesinnya, lalu memarkirnya di hanggar sepanjang waktu. Nah buku ini menunjukkan bagaimana mengfungsikan pesawat jet itu seutuhnya.

    Robert K. Cooper, Ph.D. adalah pendiri Breakthroughs in Leadership Series. Dr. Cooper dikenal dengan karya rintisannya dalam program "melejit di bawah tekanan".

    Judul   : Unleash Your Other 90% (Realisasikan 90% Potensi Tersembunyi Anda)
    Penulis   : Robert K. Cooper
    Bahasa   : Indonesia
    Format eBook   : EXE (tanpa instal, langsung bisa dibuka)
    Format download   : EXE via Google Drive
    Size   : 2 MB
    Sumber   : diduniadownload.blogspot.com
    Diposting oleh di Tidak ada komentar:
    Label: , , ,

    Jumat, 16 September 2016

    Agar Siapa Saja Mau Melakukan Apa Saja Untuk Anda

    eBook Agar Siapa Saja Mau Melakukan Apa Saja Untuk Anda

    Kumpulan taktik psikologis terhebat untuk membuat segala sesuatu berjalan sesuai dengan keinginan Anda. Rahasia-rahasia psikologis dalam menguasai dan memengaruhi setiap situasi agar Anda tidak pernah lagi merasa tak berdaya.

    Judul   : Agar Siapa Saja Mau Melakukan Apa Saja Untuk Anda
    Penulis   : David J. Leiberman, Ph.D.
    Bahasa   : Indonesia
    Format eBook   : EXE (tanpa instal, langsung bisa dibuka)
    Format download   : EXE via Google Drive
    Size   : 2 MB
    Sumber   : diduniadownload.blogspot.com
    Diposting oleh di Tidak ada komentar:
    Label: , , ,

    Kamis, 18 Agustus 2016

    eBook 9 Prinsip Sukses dari CEO Perusahaan Raksasa Virgin Group

    eBook 9 Prinsip Sukses dari CEO Perusahaan Raksasa Virgin Group

    Direcomendasikan oleh Admin syairi21, Baca.!!

     Judul   : 9 Prinsip Sukses dari CEO Perusahaan Raksasa Virgin Group
    Penulis   : Richard Branson (CEO perusahaan Virgin Group)
    Bahasa   : Indonesia
    Format eBook   : EXE (tanpa instal, langsung bisa dibuka)
    Format download   : RAR via Google Drive
    Size   : 1 MB
    Sumber   : diduniadownload.blogspot.com
    Diposting oleh di Tidak ada komentar:
    Label: , , , ,

    Rabu, 17 Agustus 2016

    eBook Kumpulan Hadits Tentang Agama Islam

    Kumpulan eBook yang bisa didownload secara gratis. Semoga bermanfaat.
    Format File   : PDF
    Size File   : Semua size file dibawah 1 MB
    Sumber   : http://mromi.wordpress.com/

     Tentang Hari Kiamat, Surga dan Neraka

    eBook Hadits Tentang Hari Kiamat, Surga dan Neraka
    Hadits Adab

    eBook Hadits Adab
    Hadist Budi Pekerti

    eBook Hadist Budi Pekerti
    Terjadinya Fitnah Dan Tanda-Tanda Hari Kiamat

    eBook Terjadinya Fitnah Dan Tanda-Tanda Hari Kiamat
    Hadits Tentang Keimanan

    eBook Hadits Tentang Keimanan
    Hadits Tentang Keselamatan

    eBook Hadits Tentang Keselamatan
    Hadits Keutamaan beberapa perkara

    eBook Hadits Keutamaan beberapa perkara
    Hadits Tentang Mimpi

    eBook Hadits Tentang Mimpi
    Kumpulan Hadits Puasa dan I’tikaf

    eBook Kumpulan Hadits Puasa dan I’tikaf
    Hadits Sholat Sunnah

    eBook Hadits Sholat Sunnah
    Proses penciptaan manusia dan penentuan rezeki, ajal dan amalnya serta nasibnya sengsara ataukah bahagia

    eBook Proses penciptaan manusia dan penentuan rezeki, ajal dan amalnya serta nasibnya sengsara ataukah bahagia
    Hadits Thaharah (Bersuci)

    eBook Hadits Thaharah (Bersuci)
    Hadits Zuhud dan Kelembutan Hati

    eBook Hadits Zuhud dan Kelembutan Hati
    Diposting oleh di Tidak ada komentar:
    Label: , , , , ,

    Senin, 15 Agustus 2016

    EBook Change Your Maindset Change Your Live

    Download eBook Change Your Maindset Change Your Live

    Judul   : Change Your Maindset Change Your Live
    Deskripsi   : Cara baru melihat dunia dan hidup sukses tak berhingga
    Bahasa   : Indonesia
    Penulis   : Carol S. Dweck, Ph. D.
    Tipe eBook   : exe (software tidak perlu instal, langsung bisa buka)
    Size   : 985 KB

    Daftar Isi   :
    Download eBook Change Your Maindset Change Your Live

    Download eBook Change Your Maindset Change Your Live

    Download eBook Change Your Maindset Change Your Live

    Diposting oleh di Tidak ada komentar:
    Label: , , ,
    Langganan: Postingan (Atom)