body {

    background-color: lightsteelblue;

}

.btn {
    border-radius: 2px;
    border: 1px solid #260801;
    padding: 0.5em !important;
    display: inline-block !important;
    color: #260801;
    text-decoration: none;
    margin: 0.5em;
    text-align: left !important;
}
.trigger {
    display: flex;
flex-direction: row;
font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}



.box{
    height: 100px;
    width: 100px;
    border: mediumpurple solid 2px;
    margin: 15px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
}


.trigger:hover .one {
    border-radius: 10px;
    box-shadow: mediumturquoise 4px 4px 4px;
background-color: mediumslateblue;
}

.trigger:hover .two {
    border-radius: 30px;
    box-shadow: mediumturquoise -4px -4px 4px;
    transition-delay: 0.2s;
    background-color: mediumslateblue;
    opacity: 0.7;

}
.trigger:hover .three {
    border-radius: 40px;
    transition-delay: 0.4s;
    box-shadow: mediumturquoise 4px 4px 4px;
    background-color: mediumslateblue;
    opacity: 0.4;

}

.trigger:hover .four {
border-radius: 70px;
transition-delay: 0.6s;
box-shadow: mediumturquoise -4px -4px 4px;
background-color: mediumslateblue;
opacity: 0.3;
}

.trigger:hover .five {
    border-radius: 40px;
    transition-delay: 0.4s;
    box-shadow: mediumturquoise 4px 4px 4px;
    opacity: 0.4;

}

.trigger:hover .six {
    border-radius: 30px;
    transition-delay: 0.2s;
    box-shadow: mediumturquoise -4px -4px 4px;
    opacity: 0.7;
}
.trigger:hover .seven {
    border-radius: 10px;
    box-shadow: mediumturquoise 4px 4px 4px;

}