How to assign a border crossing?-CodePudding

i need time for border to go.i add transition: 2s; but dont work My code:

.explore{
    margin-top: 2.5rem;
    width: 15rem;
    height: 4rem;
    text-align: center;
    display: block;
    font-size: 2rem;
    border: 0.1rem solid #000;
    border-radius: 2.5rem;
    margin-left: 1.5rem;
    position: relative;
    z-index: 1;
    
}

.explore a{
    display: block;
    text-decoration: none;
    font-size: 2rem;
    color: #000;
    text-align: center;
    margin-top: 0.7rem;
    
}

.explore:hover { 
    top: 1rem;
    right: 1.4rem;
    border: none;
    text-align: center;
    transition: 2s;
    transform: translateY(0.1rem) translateX(-1rem);
}

.explore-hover{
    display: inline;
    position: absolute;
    width: 15rem;
    height: 4rem;
    border-radius: 2.5rem; 
    background-color: #f1e0d4;
    top: 40rem;
}

<span ><a href="#">Explore→</a></span>
<div ></div>

I want to do like here: see here

when i do the border disappears immediately even though i give transition 10 seconds

CodePudding user response：

The border shorthand is not animatable, use border-color property instead. This also keeps the dimensions the same as an added benefit. Don't add a top/bottom on hover, use transform instead.

.explore{
    margin-top: 2.5rem;
    width: 15rem;
    height: 4rem;
    text-align: center;
    display: block;
    font-size: 2rem;
    border: 0.1rem solid #000;
    border-radius: 2.5rem;
    margin-left: 1.5rem;
    position: relative;
    z-index: 1;
    
}

.explore a{
    display: block;
    text-decoration: none;
    font-size: 2rem;
    color: #000;
    text-align: center;
    margin-top: 0.7rem;
    
}

.explore:hover { 
    border-color: transparent;
    text-align: center;
    transition: 2s;
    transform: translateY(0.1rem) translateX(-1rem);
}

.explore-hover{
    display: inline;
    position: absolute;
    width: 15rem;
    height: 4rem;
    border-radius: 2.5rem; 
    background-color: #f1e0d4;
    top: 40rem;
}

<span ><a href="#">Explore→</a></span>
<div ></div>