Вариант при помощи border-top
.
Суть в чём, изначально border-top
есть, но его не видно, ибо его цвет transparent
(прозрачный), при наведение он становится нужным цветом. Эффект затухания\появления.
.item {
display: inline-block;
padding: 7px 12px 10px; /* 7px - это верхний отступ, он как и нижний 10px - 3px бордера сверху */
background: #e8ebf1;
color: #000;
border-top: 3px solid transparent;
transition: all .3s linear;
font-size: 140%;
}
.item:hover {
border-top-color: #2aacc8;
color: #2aacc8;
background: #fff;
}
<div class="item">Наведи на меня</div>
В принципе, можно сделать эффект "выезда", через border-top
, но при анимации мы будет наблюдать дёрганье:
.item {
display: inline-block;
padding: 10px 12px;
background: #e8ebf1;
color: #000;
border-top: 0 solid #2aacc8;
transition: all .3s linear;
font-size: 140%;
}
.item:hover {
border-top-width: 3px;
padding-top: 7px; /* те же 10px - 3px */
color: #2aacc8;
background: #fff;
}
<div class="item">Наведи на меня</div>
По этому, считаю, что для реализации нужной вам фишки, лучше всего использовать box-shadow
.
К тому же не придётся трогать padding
вообще, ибо box-shadow
идёт от границ элемента и по факту игнорирует отступы.
Эффект затухания\появления:
.item {
display: inline-block;
padding: 10px 12px;
background: #e8ebf1;
color: #000;
transition: all .3s linear;
font-size: 140%;
box-shadow: 0 3px 0 0 transparent inset;
}
.item:hover {
box-shadow: 0 3px 0 0 #2aacc8 inset;
color: #2aacc8;
background: #fff;
}
<div class="item">Наведи на меня</div>
Эффект "выезда":
.item {
display: inline-block;
padding: 10px 12px;
background: #e8ebf1;
color: #000;
transition: all .3s linear;
font-size: 140%;
box-shadow: 0 0 0 0 #2aacc8 inset;
}
.item:hover {
box-shadow: 0 3px 0 0 #2aacc8 inset;
color: #2aacc8;
background: #fff;
}
<div class="item">Наведи на меня</div>