Cara Membuat Effect Gaya Tombol Di Blogger - Arsad Pedia

Arsadpedia.com

Cara Membuat  Effect Gaya Tombol Di Blogger - Halo temen - temen, selamat datang di blog saya pada kali ini saya akan membagikan sebuah tutorial Cara Membuat  Effect Gaya Tombol Di Blogger gunanya adalah untuk menambah mempercantik tampilan blog kamu untuk lebih lengkap nya silahkan lihat di bawah ini

Kelebihan:

1. Tampilan Gaya Baru
2. Tingkatkan Visibilitas Tombol
3. Efek Arahkan Arah yang Menarik 
4. Ubah Tombol lama Anda menjadi Tombol Baru ini

Cara pemasangan

1. Buka Dashboard Blogger
2. Buka Tema > Edit HTML
3. Silahkan cari kode disamping ini]]></b:skin>
4. Kemudian copy dan paste kode di bawah ini tepat diatas kode tersebut

   
   @import: url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
   
   .container {
     text-align: center;
   }
   h1 {
     margin-left: 30px;
     margin-bottom: 50px;
   }
   .button {
     width: 140px;
     padding-top: 15px;
     padding-bottom: 15px;
     text-align: center;
     color: #000;
     text-transform: uppercase;
     font-weight: 300;
     margin-left: 15px;
     margin-bottom: 15px;
     cursor: pointer;
     display: inline-block;
   }
   
   .button-1 {
     background-color: transparent;
     border: 3px solid #00d7c3;
     border-radius: 50px;
     -webkit-transition: all .15s ease-in-out;
     transition: all .15s ease-in-out;
     color: #00d7c3;
   }
   .button-1:hover {
     box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3;
     border: 3px solid #00d7c3;
   }
   
   .button-2 {
     color: #fff;
     border: 3px solid #c266d3;
     background-color: #fff;
     background-image: -webkit-linear-gradient(30deg, #c266d3 50%, transparent 50%);
     background-image: linear-gradient(30deg, #c266d3 50%, transparent 50%);
     background-size: 500px;
     background-repeat: no-repeat;
     background-position: 0%;
     -webkit-transition: background 300ms ease-in-out;
     transition: background 300ms ease-in-out;
   }
   .button-2:hover {
     background-position: 100%;
     color: #c266d3;
   }
   
   .button-3 {
     border: 2px solid #3c73ff;
     background-color: #3c73ff;
     border-radius: 20px;
     color: #fff;
     transition: .3s;
   }
   .button-3:hover {
     box-shadow: 8px 8px #99bdff;
     transition: .3s;
   }
   
   .button-4 {
     background-color: transparent;
     border: 3px solid #ff0251;
     color: #ff0251;
     transition: .3s;
   }
   .button-4:hover {
     animation: pulse 1s infinite;
     transition: .3s;
   }
   @keyframes pulse {
     0% {
       transform: scale(1);
     }
     70% {
       transform: scale(.9);
     }
       100% {
       transform: scale(1);
     }
   }
   
   .button-5 {
     width: 150px;
     border-radius: 5px;
     background-color: #F4F200;
     background-image: #F4F200;
     background-image: -moz-linear-gradient(top, #fff 0%, #F4F200 100%); 
     background-image: -webkit-linear-gradient(top, #fff 0%,#F4F200 100%); 
     background-image: linear-gradient(to bottom, #fff 0%,#F4F200 100%); 
     background-size: 300px;
     background-repeat: no-repeat;
     background-position: 0%;
     -webkit-transition: background 300ms ease-in-out;
     transition: background 300ms ease-in-out;
   }
   .button-5:hover {
     background-position: -200%;
     transition: background 300ms ease-in-out;
   } 
   

5. Buka Postingan > Tampilan HTML dan copy paste kode di bawah ini

     <div class="button button-1"target="blank" title="Google Deso" onclick="window.open('#')">Neon</div>
     <div class="button button-2" target="blank" title="Angle bg" onclick="window.open('#')">Angle bg</div>
     <div class="button button-3" target="blank" title="Shadew" onclick="window.open('#')">Shadow</div>
     <div class="button button-4"target="blank" title="Pulse" onclick="window.open('#')">Pulse</div>
     <div class="button button-5"target="blank" title="Gradient" onclick="window.open('#')">Gradient</div>
     

catatan:
Silahkan ubah tanda # dengan URL kamu

Demikian Tutorial Cara Membuat  Effect Gaya Tombol Di Blogger pada kesempatan kali ini dan semoga bermanfaat, nantikan terus update - update berikut nya dari kami sekian wasalam