Javascript ile buton'a nasıl link verebiliriz?

Merhabalar, arkadaşlar <buttonff> (Deneme Yazı) olan kısma link vermem lazım nasıl yapmam gerekiyor?

<script>
    var html = document.querySelector(".slider22")
    $(document).ready(function () {
        $products = $(".service.prg-home-DC .productsType");
        $products.addClass("item").removeClass("col-xs-4 col-sm-4 col-md-2 product-mini-6")
        $products.first().addClass("active")
        setTimeout(() => {
            $("#carousel-example-generic .carousel-inner").append($products);
            $resim = $("#carousel-example-generic .lazy.load[data-src]").data().src
            $("#carousel-example-generic .lazy.load").src = $resim
        }, 100);
        $(".prg-home #main .pull-right").after("<div class='col-md-3 slider22'> <buttonff> Deneme Yazı <i class='glyphicon glyphicon-chevron-left fa fa-long-arrow-right'></i></buttonff> <div id='carousel-example-generic' class='carousel slide' data-ride='carousel'> <div class='carousel-inner'></div><a class='left carousel-control' href='#carousel-example-generic' role='button' data-slide='prev'> <i class='glyphicon glyphicon-chevron-left fa fa-angle-left'></i> </a> <a class='right carousel-control' href='#carousel-example-generic' role='button' data-slide='next'> <i class='glyphicon glyphicon-chevron-right fa fa-angle-right'></i> </a> </div></div>")
    });

a href ekleyebilirsin oraya

$(".myBox").click(function() { window.location = "http://google.com"; });

<div [COLOR=var(--highlight-keyword)]class[/COLOR]=[COLOR=var(--highlight-variable)]"myBox"[/COLOR]></div>

Hocam onu ekleyince sitede o alan tamamen kalkıyor, görünmüyor.

<script>
    var html = document.querySelector(".slider22")
    $(document).ready(function () {
        $products = $(".service.prg-home-DC .productsType");
        $products.addClass("item").removeClass("col-xs-4 col-sm-4 col-md-2 product-mini-6")
        $products.first().addClass("active")
        setTimeout(() => {
            $("#carousel-example-generic .carousel-inner").append($products);
            $resim = $("#carousel-example-generic .lazy.load[data-src]").data().src
            $("#carousel-example-generic .lazy.load").src = $resim
        }, 100);
        $(".prg-home #main .pull-right").after("<div class='col-md-3 slider22'> <a href='http://gideceklink.com'> <buttonff> Deneme Yazı <i class='glyphicon glyphicon-chevron-left fa fa-long-arrow-right'></i></buttonff> </a> <div id='carousel-example-generic' class='carousel slide' data-ride='carousel'> <div class='carousel-inner'></div><a class='left carousel-control' href='#carousel-example-generic' role='button' data-slide='prev'> <i class='glyphicon glyphicon-chevron-left fa fa-angle-left'></i> </a> <a class='right carousel-control' href='#carousel-example-generic' role='button' data-slide='next'> <i class='glyphicon glyphicon-chevron-right fa fa-angle-right'></i> </a> </div></div>")
    });

Harikasın hocam çok teşekkürler..

onclick ekleyebilirsiniz o kadar uzun kod yazmaya gerek yok

Hocam peki bu buttonff 'e Tablette farklı görünmesi için media etiketi ekliyorum. Amacım font'un tablette küçülmesi fakat hiçbir şekilde değişmiyor. Sebebi ne olabilir?
@kayazade; @OneGui; @zNightLastTR;

@media screen and (min-width:500px) and (max-width:600px),screen and (min-device-width:500px) and (max-device-width:600px) {
    .buttonff{font-size: 10px !important; }
  }
    @media screen and (min-width:600px) and (max-width:900px),screen and (min-device-width:600px) and (max-device-width:900px)  {
    .buttonff{font-size: 10px !important; }
}
    @media (min-width: 768px) and (max-width: 1024px) {
    .buttonff{font-size: 10px !important;}
}
    @media (min-width: 1025px) and (max-width: 1280px) {
      .buttonff{font-size: 10px !important; }
}

bootstrap library de mevcutmu