How is the "double button" at the KRIESI homepage done?

1) make a: Fullwidth Easy Slider
2) choose slide-show transition : fade
3) place an image and put html-code into : caption – caption text field:
<div>A subheading line included before the buttons</div><div class="avia-double-buttons "><a href="https://kriesi.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=Kriesi" class="avia-double-button avia-double-button-2">Purchase Now</a></div> (put it in without line-breaks !)
As you see – you can add infront of the buttons a subheading line!

4) put this to your quick css:

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top #wrap_all .avia-slide-wrap .avia-double-button, 
#top #wrap_all .avia-hover-fx .avia-double-button {
    background: rgba(0,0,0,0.2);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
        padding-bottom: 13px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
        border-top-color: rgb(255, 255, 255);
        border-right-color: rgb(255, 255, 255);
        border-right-width: 4px;
        border-bottom-color: rgb(255, 255, 255);
        border-left-color: rgb(255, 255, 255);
    text-decoration: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 26px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -14px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 10px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
        border-left-color: currentcolor;
}

/** if you like to have different hover colors  **/
#top #wrap_all .main_color .avia-slide-wrap .avia-double-button-1:hover, 
#top #wrap_all .main_color .avia-hover-fx .avia-double-button-1:hover {
    background: rgba(0, 100, 190, 0.6);
    color: #fff;
}

#top #wrap_all .main_color .avia-slide-wrap .avia-double-button-2:hover, 
#top #wrap_all .main_color .avia-hover-fx .avia-double-button-2:hover {
    background-color: rgba(200,0,120,0.6);
    color: #fff;
}

for responsive behavior – test what fits best as width value:

@media only screen and (max-width:767px) {
 .responsive #top .avia-double-button {
  width:50%;
  min-width:50%;
  margin:0
 }
}

Result: https://webers-testseite.de/doublebutton/

And dear Gitte you aren’t able to transmit the more complicated case to an easier one?
the html code is above – put it in a text-block or code block element – the rest only had to be adjusted to not specific for sliders:

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top #wrap_all  .avia-double-button, 
#top #wrap_all .avia-double-button {
    background: #000;
    background: rgba(0,0,0,0.4);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
    padding-bottom: 13px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
        border-top-color: rgb(255, 255, 255);
        border-right-color: rgb(255, 255, 255);
        border-right-width: 4px;
        border-bottom-color: rgb(255, 255, 255);
        border-left-color: rgb(255, 255, 255);
    text-decoration: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 40px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -22px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 12px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
        border-left-color: currentcolor;
}

#top #wrap_all .main_color .avia-double-button-1:hover, 
#top #wrap_all .main_color .avia-double-button-1:hover {
    background: rgba(0, 100, 190, 0.6);
    color: #fff;
}

#top #wrap_all .main_color  .avia-double-button-2:hover, 
#top #wrap_all .main_color .avia-double-button-2:hover {
    background-color: rgba(200,0,120,0.6);
    color: #fff;
}

@media only screen and (max-width:480px) {
 .responsive #top .avia-double-button {
  width:50%;
  min-width:50%;
  margin:0
 }
}

see test page

if I had no respect for simple questions here, then I would be satisfied with hints at the solution approach. But I often mean to formulate precise instructions here. Some people may even be disturbed by the detail and illustrations – and many are not interested in a learning curve but just want to get the solution in the form of short snippets. But despite everything the questions are often not precise enough.
You presented me a picture of the slider above; then I mistakenly assumed that you wanted to achieve that. But in the end it’s not much different than the described procedure, because as the mods here already indicated, it’s not an ALB element, but just like I indicated above simple html insertion and css styling. So please always try to be as specific as possible in your question in order to avoid superfluous solutions.