<div class="container">
<div class="floater">
<ul class="floater__list">
<li class="floater__list-item">
<div class="floater__list-item-label">Milestone Goal</div>
<svg width="26px" height="26px" viewBox="666 -86 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(666.000000, -86.000000)">
<path d="M1.44444444,7.02981625 L1.44444444,21.5639338 C1.44444444,22.8562845 2.52250308,23.90625 3.85037916,23.90625 L22.1496208,23.90625 C23.4770725,23.90625 24.5555556,22.8566977 24.5555556,21.5639338 L24.5555556,7.02981625 C24.5555556,5.73746549 1.44444444,5.73705227 1.44444444,7.02981625 Z M0,3.74856625 C0,1.67829027 1.72606809,0 3.85037916,0 L22.1496208,0 C24.2761265,0 26,1.68042687 26,3.74856625 L26,21.5639338 C26,23.6342097 24.2739319,25.3125 22.1496208,25.3125 L3.85037916,25.3125 C1.72387347,25.3125 0,23.6320731 0,21.5639338 L0,3.74856625 Z" id="Combined-Shape" fill="#FFFFFF"></path>
<polygon id="Path" fill="#FFFFFF" points="5.11281222 15.1050447 9.86412384 20.8614415 21.2072996 10.5097954 18.3463765 8.203125 10.749346 15.4210298 7.84534433 12.2852327"></polygon>
</g>
</svg>
</li>
<li class="floater__list-item">
<div class="floater__list-item-label">Metric Goal</div>
<svg width="26px" height="26px" viewBox="666 -41 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group-5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(666.000000, -41.000000)">
<path d="M1.44444444,7.02981625 L1.44444444,21.5639338 C1.44444444,22.8562845 2.52250308,23.90625 3.85037916,23.90625 L22.1496208,23.90625 C23.4770725,23.90625 24.5555556,22.8566977 24.5555556,21.5639338 L24.5555556,7.02981625 C24.5555556,5.73746549 1.44444444,5.73705227 1.44444444,7.02981625 Z M0,3.74856625 C0,1.67829027 1.72606809,0 3.85037916,0 L22.1496208,0 C24.2761265,0 26,1.68042687 26,3.74856625 L26,21.5639338 C26,23.6342097 24.2739319,25.3125 22.1496208,25.3125 L3.85037916,25.3125 C1.72387347,25.3125 0,23.6320731 0,21.5639338 L0,3.74856625 Z" id="Combined-Shape" fill="#FFFFFF"></path>
<path d="M10.7389071,19.5002919 L14.9168403,14.6181972 L18.000806,16.5907539 L22.7314831,11.3774532 C23.0780574,10.9955215 23.0409852,10.4123797 22.6486799,10.0749696 C22.2563747,9.73755952 21.6573945,9.77365151 21.3108202,10.1555833 L17.6681918,14.1698324 L14.5435276,12.1712443 L10.4132458,16.9976563 L7.72836147,15.1151796 L3.16868236,19.5255071 C2.79733371,19.8846923 2.79538179,20.4689468 3.16432261,20.8304762 C3.53326343,21.1920055 4.13338661,21.1939058 4.50473525,20.8347206 L7.9244808,17.5269884 L10.7389071,19.5002919 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</svg>
</li>
<li class="floater__list-item">
<div class="floater__list-item-label">Goal Board</div>
<svg width="26px" height="28px" viewBox="666 7 26 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group-6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(666.000000, 8.687500)">
<path d="M0,3.74856625 C0,1.67829027 1.72606809,-6.66133815e-15 3.85037916,-6.66133815e-15 L22.1496208,-6.66133815e-15 C24.2761265,-6.66133815e-15 26,1.68042687 26,3.74856625 L26,21.5639338 C26,23.6342097 24.2739319,25.3125 22.1496208,25.3125 L3.85037916,25.3125 C1.72387347,25.3125 0,23.6320731 0,21.5639338 L0,3.74856625 Z M1.44444444,7.02981625 L1.44444444,21.5639338 C1.44444444,22.8562845 2.52250308,23.90625 3.85037916,23.90625 L22.1496208,23.90625 C23.4770725,23.90625 24.5555556,22.8566977 24.5555556,21.5639338 L24.5555556,7.02981625 C24.5555556,5.73746549 1.44444444,5.73705227 1.44444444,7.02981625 Z M2.88888889,18.75 L23.1111111,18.75 L23.1111111,20.625 C23.1111111,21.6605339 22.2679332,22.5 21.2449002,22.5 L4.75509983,22.5 C3.72441999,22.5 2.88888889,21.6677535 2.88888889,20.625 L2.88888889,18.75 Z M2.88888889,7.96875 C13,6.72225952 23.1111111,7.96875 23.1111111,7.96875 L23.1111111,11.71875 L2.88888889,11.71875 L2.88888889,7.96875 Z M2.88888889,13.125 L23.1111111,13.125 L23.1111111,17.34375 L2.88888889,17.34375 L2.88888889,13.125 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</svg>
</li>
</ul>
<div class="floater__btn">
<svg class="floater__btn-icon floater__btn-icon-plus" width="24px" height="24px" viewBox="672 53 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<defs></defs>
<path d="M687,62 L687,54.0006946 C687,53.4474692 686.556414,53 686.009222,53 L681.990778,53 C681.450975,53 681,53.4480262 681,54.0006946 L681,62 L673.000695,62 C672.447469,62 672,62.4435864 672,62.990778 L672,67.009222 C672,67.5490248 672.448026,68 673.000695,68 L681,68 L681,75.9993054 C681,76.5525308 681.443586,77 681.990778,77 L686.009222,77 C686.549025,77 687,76.5519738 687,75.9993054 L687,68 L694.999305,68 C695.552531,68 696,67.5564136 696,67.009222 L696,62.990778 C696,62.4509752 695.551974,62 694.999305,62 L687,62 Z" id="Combined-Shape" stroke="none" fill="#FFFFFF" fill-rule="evenodd"></path>
</svg>
</div>
</div>
</div>@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open sans', sans-serif;
margin: 0;
background: #eaeaea;
}
.container {
width: 100vw;
height:100vh;
}
.floater {
margin-right: 1rem;
}
.floater__list {
margin: 0 0 0;
padding: 0 0 0 6px;
list-style: none;
position: absolute;
bottom: 0;
right: 1rem;
}
.floater__list-item {
opacity: 0;
position: relative;
width: 4rem;
height: 4rem;
margin: 0.5rem 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: rgba(0,0,0,0.7);
background-color: #0A9928;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
.floater.is-active .floater__list-item:nth-child(1){
animation: fadeIn 0.25s ease-out 0.1s forwards, moveUp 0.25s ease-out 0.1s forwards;
}
.floater.is-active .floater__list-item:nth-child(2){
animation: fadeIn 0.25s ease-out 0.05s forwards, moveUp 0.25s ease-out 0.05s forwards;
}
.floater.is-active .floater__list-item:nth-child(3){
animation: fadeIn 0.25s ease-out forwards, moveUp 0.25s ease-out forwards;
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1;}
}
@-webkit-keyframes moveUp {
0% { }
100% { transform: translate3d(0,-5rem,0);}
}
.floater__list-item-label {
position: absolute;
right: 110%;
padding: 0.5rem;
font-size: 0.75rem;
color: #fff;
background-color: rgba(0,0,0,0.3);
border-radius: 0.5rem;
opacity: 1;
white-space: nowrap;
pointer-events: none;
align-self: center;
}
.floater__list-item-label::selection {
background-color: transparent;
}
.floater.is-active .floater__list-item:hover {
background: #2189CE;
}
@media (min-width: 32rem) {
.floater__list-item-label {opacity: 0;}
}
.floater__btn {
position: absolute;
bottom: 1rem;
right: 1rem;
width: 4rem;
height: 4rem;
float: right;
margin-right: 0;
cursor: pointer;
background-color: #2189CE;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px rgba(0,0,0,.25);
transition: all 0.2s ease-in-out;
}
.floater__btn:hover {
transform: scale(1.1);
}
.floater.is-active .floater__btn {
background: #D4421E;
}
.floater.is-active .floater__btn:hover {
transform: scale(1);
}
.floater__list-item:hover .floater__list-item-label {
opacity: 1;
}
.floater__btn-icon {
transition: all .5s;
}
.floater__btn-icon-plus {
transform: rotate(0);
transform: rotate(0);
}
.floater.is-active .floater__btn-icon-plus {
opacity: 1;
transform: rotate(225deg);
transform: rotate(225deg);
}var $floater = $('.floater');
$floater.on('click', function(e) {
$floater.toggleClass('is-active');
e.stopPropagation();
});
$('.container').on('click', function() {
$floater.removeClass('is-active');
});
External CSS
This Pen doesn't use any external CSS resources.