BouncyButton

BouncyButton

Yine farklı bir örnek ve eğlenceli olduğu gibi sitenize renk katacak olan bir çalışma. Sadece bir buton olarak hazırlanmış ama siz kendi sitenize ekleyerek farklı örnekler üzerinde de kullanabilirsiniz. Sadece birazcık kodları kurcalamanız gerek. Gif resminde de gördüğünüz  gibi sarı renkli örneğimiz her tıklandığında renk değiştirip zıplıyor.

Css:

        @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
        * {
          box-sizing: border-box;
          margin: 0;
          border: 0;
        }
        
        html, body {
          height: 100%;
        }
        
        body {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }
        button {
          font-family: Source Sans Pro;
          font-size: 1rem;
          line-height: 3.5em;
          padding: 0 1.5em;
          background: gold;
          box-shadow: inset 0 -0.125rem rgba(0, 0, 0, 0.2);
          color: black;
          border-radius: 5em;
          cursor: pointer;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          -webkit-transform-origin: 100% 100%;
                  transform-origin: 100% 100%;
        }
        button:focus {
          outline: 0;
        }
        
        .shadow {
          margin-top: -.325rem;
          width: 100%;
          height: .75rem;
          background: -webkit-radial-gradient(closest-side, #dcdcdc, rgba(0, 0, 0, 0));
          background: radial-gradient(closest-side, #dcdcdc, rgba(0, 0, 0, 0));
          opacity: 0;
        }

Html:

    <figure>
        <button>Recommend</button>
        <div class="shadow"></div>
    </figure>

Js:

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/jquery.velocity.min.new.js'></script>
    <script>
        $("button").mousedown(function(){
          $(this).html("Recommended").velocity({
            backgroundColorRed : "0",
            translateY: "-1.5rem",
            rotateZ: "-10deg"
          }, 100, "easeOut").velocity({
            rotateZ: "8deg",
          }, 150).velocity({
            translateY: "0",
            rotateZ: "0"
          }, 600, "easeOutBounce");
          
          $("+ .shadow", this).velocity({
            scale: "1.3",
            opacity: "1"
          }, 150).velocity("reverse", 600, "easeOutBounce");
        
        });
    </script>
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-11-06 tarihinde yayınlandı,Toplam 1826 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...