ul{
    list-style:none;
}
a{
    text-decoration: none;
}
* {
    box-sizing: border-box;
    word-break: break-all;
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    vertical-align: baseline;
}
.flexbox-c{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.codepenbox{
  margin-top:20px;
}

.evabtnbox{
    margin: 0 auto;
    max-width: 500px;
    position: relative;
}
.parentitem .parentlink{
    background: #A6DD02;
    clip-path: polygon(85% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
    display: block;
    font-size: 26px;
    margin: 0 auto 15px;
    max-width: 250px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    text-align: center;
    transition: .5s;
    text-decoration: none;
}
.parentitem .parentlink::before{
    content: "";
    background:repeating-linear-gradient(45deg,#A6DD02,#A6DD02 5px,#000 0,#000 10px);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 20%;
    width: 100%;
}
.parentitem .parentlink span{
    background: #000;
    clip-path: polygon(calc(85% - 2px) 0, calc(100% - 2px) calc(55% - 2px), calc(100% - 2px) calc(100% - 2px), 0 calc(100% - 2px), 0 0);
    color: #fff;
    display: block;
    padding: 10px;
    position: relative;
    transition: .5s;
}
.parentitem .parentlink:hover{
    opacity: 1;
}
.parentitem .parentlink:hover span {
    animation: evabtnloop .7s linear ;
}
.parentitem .child li{
    margin: 0 auto;
    width: 48%;
}
.parentitem .child a{
    background: #F7BC04;
    clip-path: polygon(80% 0, 100% 40%, 100% 100%, 0 100%, 0 0);
    display: block;
    font-size: 24px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    text-align: center;
    transition: .5s;
}
.parentitem .child a::before{
    content: "";
    background:repeating-linear-gradient(45deg,#F7BC04,#F7BC04 5px,#000 0,#000 10px);
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20%;
    width: 100%;
    transition: .5s;
}
.parentitem .child li:nth-child(2) a{
    background: #E0302D;
}
.parentitem .child li:nth-child(2) a::before{
    background:repeating-linear-gradient(45deg,#E0302D,#E0302D 5px,#000 0,#000 10px);
}
.parentitem .child a span{
    background: #000;
    clip-path: polygon(calc(80% - 2px) 0, calc(100% - 2px) calc(45% - 2px), calc(100% - 2px) calc(100% - 2px), 0 calc(100% - 2px), 0 0);
    color: #fff;
    display: block;
    padding: 10px;
    transition: .5s;
}
.parentitem .child a:hover{
    opacity: 1;
}
.parentitem .child a:hover span{
    animation: evabtnloop .7s linear ;
}
@keyframes evabtnloop {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: translateX(100%);
    }
    50% {
        opacity: 0;
        transform: translateX(-100%);
    }
    75% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}