Link Nudging Versi CSS3

Assalamu'alaikum ..
Sobat bloggers, sebelumnya saya sudah posting CSS & jQuery Link Nudging, Namun kali ini berbeda, kali ini menggunakan CSS3 .
Lansung aja sob Cekidot ..

Code CSS3

Berikut adalah Code CSS3, Silahkan kalian masukan di atas Tag ]]></b:skin>

ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:white;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
}

Ada pertanyaan dari Sobat Bloggers, yaitu dari Alam Perwira, yaitu, klo mau kasih ke Label gimana sob ?
Penerapanya cukup mudah kok sob, anda cukup Hilangkan Code yang berwarna Biru, Itu adalah ID dari CSS3 tersebut, Bila yang berwarna biru adalah untuk Active, Sedangkan Yang berwarna Hijau adalah Saat di Hover/di sorot dengan crusor. Lah kalo berwarna Merah itu apa sob ?  yang berwarna Merah adalah tampilan Background Pada Link yang di beri Nudging, Kalian bisa menghapusnya, sebenarnya itu kurang penting.

Masih bingung nih sob ..
Contoh Penerapan di dalam Blog saya yaitu :

.post h3 {
    color: #333333;
    font-size: 16px;
    font-family: 'Piedra', cursive;
    font-weight: normal;
    text-decoration: none;
    margin: 0 0 5px;
    padding: 10px 0 0;
        text-shadow:0 1px 0px #FFF,0 0 3px #FFF,0 0 5px #FFF,0 0 30px #FFF,0 3px 5px #FFF;
        text-decoration:none;
        display:block;
        overflow:hidden;
        padding:5px 10px;
        color:white;
        background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        -webkit-background-size:200% 100%;
        -moz-background-size:200% 100%;
        background-size:200% 100%;
        -webkit-transition:all 0.26s ease-out;
        -moz-transition:all 0.26s ease-out;
        -ms-transition:all 0.26s ease-out;
        -o-transition:all 0.26s ease-out;
        transition:all 0.26s ease-out;
}

Hover Mode/Saat di sorot oleh Crusor :

.post h3 a:hover {
    color: #CF152A;
    text-decoration: none;
        background-position:100% 100%;
        padding-left:15px;
}

Contoh penerapan Lain, yaitu menjawab Pertanyaan Alam Perwira, Memasang Link Nudging Pada Label :

        #label1 .widget-content ul li :hover {
          text-decoration:none;
          display:block;
          overflow:hidden;
          padding:5px 10px;
          color:white;
          background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          -webkit-background-size:200% 100%;
          -moz-background-size:200% 100%;
          background-size:200% 100%;
          -webkit-transition:all 0.26s ease-out;
          -moz-transition:all 0.26s ease-out;
          -ms-transition:all 0.26s ease-out;
          -o-transition:all 0.26s ease-out;
          transition:all 0.26s ease-out;;
        }

Kalian juga bisa dengan Menggunakan Kode CSS Di bawah ini, saya dapatkandari Google :

#label1 .widget-content ul li :hover {margin-left: 10px;
    padding-left: 5px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.40))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%);
    -moz-transition: all 0.70s ease-out;  /* FF4+ */
    -o-transition: all 0.70s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.70s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.70s ease-out;  /* IE10? */display: block;

Code Berwarna ungu Di atas adalah ID dari Label yang kamu punya, Misal di Blog kamu IDnya label2, maka Tulisan berwarna Ungu di atas ganti menjadi label2.

Sekian dlu ya sobat, kalo kurang Jelas Komentar ya, dan Semoga bisa jawab pertanyaan Alam Perwira.
Wassalamu'alaikum wr. wb.