Here is my answer to this question.
Preview:https://jsfiddle.net/rp0jg576/53/
HTML and CSS code:
i { color: #fff; font-size: 20px !important; /* 24px preferred icon size */}a { text-decoration: none;}#btn { display: none;}.button-parent { display: flex;}.button { width: 50px; height: 50px; display: block; margin: 5px; background-color: #3498db; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;}/* link and link-parent */.link-parent { display: none; justify-content: center; align-items: center; transition: all .3s;}.link-item { background-color: #2c3e50; display: block; width: 40px; height: 40px; border-radius: 50%; margin-right: 5px; transform: translateY(5px); display: flex; justify-content: center; align-items: center; animation-name: move-up; animation-duration: .3s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-fill-mode: forwards;}/* control click */#btn:checked~.link-parent { display: flex;}/* animation */@keyframes move-up { 0% { transform: translateY(5px); } 33% { transform: translateY(0px); } 66% { transform: translateY(-5px); } 100% { transform: translateY(0px); }}#link-one { animation-delay: .1s;}#link-two { animation-delay: .2s;}#link-third { animation-delay: .3s;}#link-forth { animation-delay: .4s;}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><div class='button-parent'><input type="checkbox" id='btn'><label for="btn" class='button'><i class="material-icons">close</i></label><div class="link-parent"><a href='#' class='link-item' id='link-one'><i class="material-icons">home</i></a><a href='#' class='link-item' id='link-two'><i class="material-icons">article</i></a><a href='#' class='link-item' id='link-third'><i class="material-icons">settings</i></a><a href='#' class='link-item' id='link-forth'><i class="material-icons">room</i></a></div></div>