mintik

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(https://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='https://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>