Add buttons to blog posts in grid layout

you like to do it this way of the first row – but with two buttons : read-more and the link from your featured-image.
(Title and featured image do link to your events – like on the grid beneath the “biljetter” Button)

if you have on all Images the link to your biljetter you can do it this way.

for styling the “buttons” you may be able to do this too:
maybe a custom class on those post-sliders would be a good idea – not to influence all post-sliders

put this to your child-theme functions.php:

function custom_entry_link(){
?>
<script>
(function($){
    $(document).ready(function(){
        $('.avia-content-slider .slide-entry').each(function() {
            var readMore = $(this).find('.read-more-link'),
                biljetterLink = $(this).find('.slide-image').attr('href'),
                biljetterButton = $('<div class="biljetter"><a href="'+biljetterLink+'" >Biljetter<span class="more-link-arrow avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="right-open-big" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"><path d="M0.416 27.84l11.456-11.84-11.456-11.904q-0.832-0.832 0-1.536 0.832-0.832 1.536 0l12.544 12.608q0.768 0.832 0 1.6l-12.544 12.608q-0.704 0.832-1.536 0-0.832-0.704 0-1.536z"></path></svg></span></a></div>');
            $(this).closest('.slide-entry').find('.entry-footer').prepend($(biljetterButton));
            $(this).closest('.slide-entry').find('.entry-footer').prepend($(readMore));        
        }); 
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_entry_link');

with minimal styling:

.entry-footer {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  justify-content: flex-start;
}

it looks this way:

so if you only like to link if there are biljetservice links on the images above the titles – then take snippet two from this link

try – and have a look if this fits your needs of “button” look-alike:

#top .avia-content-slider .slide-entry-wrap {
  display: flex !important;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 30px;
  
}

#top .avia-content-slider .slide-entry {
  width: unset;
  flex: 1 1 calc(25% - 30px);
  margin: 0 !important;
  display: flex;
  flex-flow: column wrap;
  background-color: #eee;
  padding: 15px
}

@media only screen and (max-width:1049px) {
  #top .avia-content-slider .slide-entry {
    flex: 1 1 calc(50% - 30px);
  }
    #top .avia-content-slider .slide-entry a  {
    margin-left: 0;
  }
}

@media only screen and (max-width:767px) {
  #top .avia-content-slider .slide-entry {
    flex: 1 1 100%;
  }
}

.slide-content {
  margin-bottom: 60px
}

.entry-footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: auto;
  top: calc(100% - 60px);
  display: flex;
  justify-content:  space-evenly;
  flex-flow: row wrap;

}

.entry-footer a {
  margin-top: 10px;
  display: inline-block;
  padding: 3px 8px;
  transition: all 1s ease;
}

.entry-footer .read-more-link a {
  background-color: #000;
  color: #FFF !important;
}

.entry-footer a:hover {
  box-shadow: 0 3px 5px #aaa;
  transform: translateY(-5px) scale(1.03);
}

.entry-footer .biljetter a {
  background-color: #bf2e11;
  color: #FFF !important;
}

.entry-footer a path {
  fill: #FFF;
}

and check the responsive behaviour aswell.

but where does a link like : https://storasoder.se/nojesteaterntestsida/richard-obriens-rocky-horror-show-the-legendary-rock-roll-musical/
come from – that is the link you must have set.