"Untitled"
Bootstrap 4.1.1 Snippet by dkstudio

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System

Questions / Comments: