-->

Kamis, 13 Oktober 2016

Mimin SlideSeo

Efek Hover 2D Keren Menggunakan CSS

Kali ini, saya ingin membahas sedikit tentang berbagai macam efek hover menggunakan CSS. Efek ini dapat kalian terapkan di macam-macam objek seperti gambar, tombol, dll. Okey untuk itu lihat contoh efek dibawah ini.


Arahkan atau dekatkan kursor ke kotak

Bounce In
Bounce Out
Float
GROW
Grow Rotate
Rotate
SHRINK
Sink


Untuk Cara Penerapannya Dapat Kalian Liat Dibawah Ini.
  • 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 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 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 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 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 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 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>

                  Okey, Selanjutnya Terserah Anda Mau Di Pakai Dimana Efek-efek Hover Tersebut,Selamat Mencoba,Sekian...

                  Share this

                  Get Short URLloading short url
                  Disqus
                  Blogger
                  Pilih Sistem Komentar Yang Anda Sukai
                  How to style text in Disqus comments:
                  • To write a bold letter please use <strong></strong> or <b></b>.
                  • To write a italic letter please use <em></em> or <i></i>.
                  • To write a underline letter please use <u></u>.
                  • To write a strikethrought letter please use <strike></strike>.
                  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
                    And use parse tool below to easy get the style.
                  Show Parser Box

                  - http://disq.us/p/[ID DISQUS] - lihat di sini.

                  strong em u strike
                  pre code pre code spoiler
                  embed
                  avatar

                  ini dia artikel yg saya cari, sangat vermanfaat sekali

                  avatar

                  ijin bookmark artikelnya gan, thanks

                  avatar

                  terima kasih banyak artikelnya, bookmarked biar ga googling lagi.

                  Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

                  » Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
                  » Duplikat komentar
                  » Komentar menautkan link secara langsung
                  » Komentar tidak berkaitan dengan artikel
                  » Judul Komentar Berupa Promosi

                  Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

                  Sebelumnya Saya minta maaf yang sebesar-besarnya jika komentar anda belum sempat dibalas.

                  Emoticon

                  © - All Rights Reserved | Created With - Powered By Blogger

                  Like this blog? Keep us running by whitelisting this blog in your ad blocker.

                  This is how to whitelisting this blog in your ad blocker.

                  Thank you!

                  ×