Bootstrap 4.1.1 Snippet by dkstudio

<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; }

Related: See More

Questions / Comments: