在投资组合中使用动画按钮

Question

我在我的html文件中包含了动画按钮，但我不知道如何在我的投资组合中使用它们。 我尝试了更多的动画按钮，但问题是我不知道如何在我的投资组合代码中使用它们。我认为这只是一个声明和调用问题。

.dc-morph-btns {
  position:absolute; 
  left:50%;
  top:-20%;
  transform: translateX(-50%) translateY(-50%);
    width:500px;
  height:150px;
    font-size: 1.4em; 
    line-height: 0.9em; 
    color: #444; 
    text-align: center;
  padding: 30px 0;
}

.dc-morph-btns li {  
    position: relative;
    width: 70px;
    height: 70px;
    display: inline-block;
    margin-right: 30px;
    overflow: visible;

}

.dc-morph-btns li a {
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
    background: #fff;
    border: 1px solid #6BABDC;
    text-indent:0;
    display:inline-block;
    font-size:12px;
    font-weight: 400;
    text-decoration:none;
    text-align:center;
    text-transform: uppercase;
    width: 70px;
    height:70px;
    transition: all 500ms, border-radius 500ms,  cubic-bezier(0.190,1.000,0.220,1.000);
    border-radius: 50%;
}


.dc-morph-btns li a:hover {
    border: 1px solid #6BABDC;
  width: 70px;
    height:70px;
    border-radius: 3px;
    transform: rotate(-45deg);
}

.dc-morph-btns ul li i {
    position: absolute;
    width: 30px;
    left:50%;
    top:50%;
    margin: -13px 0 0 -18px;
    color: #6BABDC;
    font-size: 1.4em;
    z-index: 2;
    pointer-events: none;
}

.dc-morph-btns ul li span {
    position: absolute;
    width: 80px;
    bottom: -40px;
    left:-5px;
    display: block;
    color: #6BABDC;
    opacity:0;
    font-size: 0.7em;
    text-align: center;
    transition: all 0.5s;

}

.dc-morph-btns ul li:hover span {
    color: #6BABDC;
    opacity:1;
}

.dc-morph-btns ul li.selected span {
    color: #5181A6;
    opacity:1;
}

.dc-morph-btns ul li.selected:hover span {
    color: #6BABDC;
    opacity:1;

}

.dc-morph-btns li.selected a{  
    border: 1px solid #6BABDC;
  background: #6BABDC;
    background-clip: padding-box;
    border-top-left-radius:40px;
    border-top-right-radius:2px;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
    transform: rotate(-45deg);

}
.dc-morph-btns li i{ 
    color: #6BABDC;
}
.dc-morph-btns li.selected i{ 
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dc-morph-btns">
                <ul>
                    <li>
                        <a href="#games"></a><i class="icon-layers"></i><span>All</span></li>
                    <li>
                        <a href="#applications"></a> <i class="icon-camera"></i><span>Photos</span></li>
                    <li>
                        <a href="#all"></a><i class="icon-cog"></i><span>Settings</span></li>
                </ul>
            </div>
            <section class="work">
                <figure class="games">
                    <a href="https://play.google.com/store/apps/details?id=nebulaxgames.pidgeonpooper&hl=sl"> <img src="https://raw.github.com/Fellini85/picture/master/1.jpg" alt="" />
                        <dl> <dt>nebulaXgames</dt>
                            <dd>Pigeon Pooper</dd> <dt>Role</dt>
                            <dd>game</dd>
                        </dl>
                    </a>
                </figure>
                <figure class="games">
                    <a href="https://play.google.com/store/apps/details?id=lightningbolt.tumblingball&hl=sl"> <img src="https://raw.github.com/Fellini85/picture/master/1.jpg" alt="" />
                        <dl> <dt>nebulaXgames</dt>
                            <dd>Tumbling Ball</dd> <dt>Role</dt>
                            <dd>game</dd>
                        </dl>
                    </a>
                </figure>
                <figure class="applications">
                    <a href="https://play.google.com/store/apps/details?id=nebulaxgames.nebulaxplanner&hl=sl"> <img src="https://raw.github.com/Fellini85/picture/master/1.jpg" alt="" />
                        <dl> <dt>nebulaXgames</dt>
                            <dd>Nebula X Planner</dd> <dt>Role</dt>
                            <dd>application</dd>
                        </dl>
                    </a>
                </figure>
                <figure class="games">
                    <a href="https://play.google.com/store/apps/details?id=lightningbolt.fatlegend&hl=sl"> <img src="https://raw.github.com/Fellini85/picture/master/1.jpg" alt="" />
                        <dl> <dt>nebulaXgames</dt>
                            <dd>Fat Legend</dd> <dt>Role</dt>
                            <dd>game</dd>
                        </dl>
                    </a>
                </figure>
                <figure class="games">
                    <a href="https://play.google.com/store/apps/details?id=lightningbolt.jumping.flea&hl=sl"> <img src="https://raw.github.com/Fellini85/picture/master/1.jpg" alt="" />
                        <dl> <dt>nebulaXgames</dt>
                            <dd>Jumping Flea</dd> <dt>Role</dt>
                            <dd>game</dd>
                        </dl>
                    </a>
                </figure>
            </section>
        </div>
    </section>