<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<br/>
<hr/>
<button class="o-btn-pill o-btn-base d-flex justify-content-between bd-highlight">
<div class="u-ml-6">Vis flere</div>
<div class="o-btn">
<i class="i fas fa-arrow-down"></i> </div></button>
</div>
</div>
.o-btn-base {
background: transparent;
cursor: pointer;
white-space: nowrap;
padding: 0;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
-webkit-transition: background-color .3s ease,color .3s ease,border-color .3s ease;
transition: background-color .3s ease,color .3s ease,border-color .3s ease;
}
.fa-arrow-down:before {
background-image: url('https://busbooking.dk/public/assets/images/down-arrow-32.png');
background-size: 10px 20px;
display: inline-block;
width: 10px;
height: 20px;
content:"";
}
.o-btn-pill {
border-radius: 36px;
-webkit-box-shadow: 0 1px 0 hsl(0deg 0% 73% / 20%), 0 3px 5px rgb(0 0 0 / 8%);
box-shadow: 0 1px 0 hsl(0deg 0% 73% / 20%), 0 3px 5px rgb(0 0 0 / 8%);
width: 160px;
padding: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.o-btn {
overflow: hidden;background-color: #f6f4ef;
border-radius: 50%;height: 32px;width: 32px;
margin-left: auto;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.u-ml-6 {
margin-left: 24px;
}
@keyframes o-btn-pill-icon{
0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}
15%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
85%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
to{-webkit-transform:translateY(100px);transform:translateY(100px)}
}
.o-btn-pill{border-radius:36px;-webkit-box-shadow:0 1px 0 hsla(0,0%,72.5%,.2),0 3px 5px rgba(0,0,0,.08);box-shadow:0 1px 0 hsla(0,0%,72.5%,.2),0 3px 5px rgba(0,0,0,.08)}
.o-btn-pill i {
-webkit-animation: o-btn-pill-icon 3s linear infinite backwards;
animation: o-btn-pill-icon 3s linear infinite backwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.u-overflow-hidden {
overflow: hidden;
}
