Как сделать вот такую кнопку в css (без картинок) и чтобы при наведении на неё, с правой стороны border заполнялся до конца? Я понимаю, что здесь нельзя просить скрипты, но другого выхода уже просто не вижу, 2 часа просидел, так и не смог ни чего сделать...
2 ответа
Пример
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #000;
font-family: 'segoe ui', sans-serif;
}
.btn{
margin: 25px;
display: inline-block;
vertical-align: top;
padding: 15px 35px;
color: #fff;
text-decoration: none;
position: relative;
transition: .3s;
}
.btn:before,
.btn:after,
.btn > span:before,
.btn > span:after{
content: '';
position: absolute;
width: 15%;
height: 15%;
border: 3px solid #B3B3B3;
transition: .3s;
}
.btn:before{
top: 0; left: 0;
border-bottom: none;
border-right: none;
border-radius: 5px 0 0 0;
}
.btn:after{
top: 0; right: 0;
border-bottom: none;
border-left: none;
border-radius: 0 5px 0 0;
}
.btn > span{
display: block;
}
.btn > span:before{
bottom: 0; left: 0;
border-top: none;
border-right: none;
border-radius: 0 0 0 5px;
}
.btn > span:after{
bottom: 0; right: 0;
border-top: none;
border-left: none;
border-radius: 0 0 5px 0;
}
.btn:hover:after{
height: calc(100% - 15%);
}
<a href="#" class="btn">
Button text
<span></span>
</a>
-
-
А как сделать, чтобы по кругу заполнялось с правой стороны? Commented 12 февр. 2017 в 12:10
-
.btn:hover:before{ height: calc(100% - 15%); width: calc(100% - 15%); }
Сделал ещё так, но нижнюю часть не закрывает Commented 12 февр. 2017 в 12:19 -
-
В начале презентация, потом описание что происходит:
.container {
width: 300px;
height: 200px;
margin:0 auto;
background-image: repeating-linear-gradient(90deg, rgb(255, 0, 0), rgb(255, 0, 0) 31%, transparent 31%, transparent 69%, rgb(255, 0, 0) 69%, rgb(255, 0, 0) 100%);
padding: 10px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.container:after {
content: '';
position: absolute;
width: 300px;
height: 100px;
background: #e8e8e8;
top: 60px;
left: 0;
border-left: 10px solid white;
border-right: 10px solid white;
z-index: 1;
}
.fillline {
background: #0000ff;
width: 10px;
height: 120px;
position: absolute;
top: -60px;
right: 0;
z-index: 2;
}
.container .inner {
background: white;
width: 100%;
height: 100%;
}
@keyframes myAnimation {
from {
top: -60px;
}
to {
top: 60px;
}
}
.container:hover .fillline {
animation: myAnimation 2s;
animation-fill-mode: forwards;
}
<div class="container">
<div class="inner"> тут какой-то текст</div>
<div class="fillline"></div>
</div>
(Заметка) В хроме работает точно. Для других браузеров посмотреть нужны ли где префиксы (например для animation-fill-mode
или animation
)
Суть в чём:
- Чтоб сделать такой рисунок без картинки придется извратиться и использовать repeating-linear-gradient. В нем задаем цвета для градиента контейнера. А чтоб не было видно этого градиента, то каждый последующий цвет начинается ровно в конце предыдущего. Кстати есть такая штука как border-image-repeat, чтоб делать края повторяющейся картинкой
- Конечно градиент распространяется на весь контейнер, поэтому текст должен располагаться в своем внутреннем контейнере.
- Т.к. даже с помощью такого градиента нельзя сделать "дырки" по краям, то применяем
.container:after
на всю ширину контейнера, при этом закрашивая правый и левый край под цвет фона (в данном случае он белый). Этот блок я специально выделил серым цветом, чтоб его было видно. Т.к. анимацию заполнения края справа без извращений не сделать (как мне показалось), то дополнительно вставим элемент
div.fillline
, который расположим в верхнем правом углу контейнера. Зададим емуz-index
больше чем у.container:after
, чтобы перекрыть его. Этот элемент я специально выделил синим цветом, чтоб его было видно.Примечание! вместо того чтобы делать
.container:after
на всю ширину, можно сделать.container:after
- с правой границы контейнера, по ширине равнойborder
, а также.container:before
— расположить его с левой стороны контейнера и также сделать шириной какborder
.Собственно сама анимация: сдвигаем
fillline
так, как нам необходимо. animation-fill-mode: forwards; - оставляет стили на момент завершения движения
-
мощно, однако... а закрыть фрагменты border тонюсенькими дивами и когда нужно делать какой-то (например правый) прозрачным? знаю что кропотливая работа, но то что предлагается - полный трэш вообще, просто в отрыве... Commented 12 февр. 2017 в 8:28
-
@EugeneBartosh прозрачный див даст что? если цвет границы какого-либо цвета, то прозрачный цвет другого дива его перекроет? бред. Можно расставить по краям два дива и один для анимации перекрытия (итого три), однако получится не меньший бред. Чисто посредством css такой эффект можно получить лишь извращением (на мой взгляд)...... был бы js и border картинкой — вcе делалось бы гораздо проще. Но вас никто не останавливает предложить ответ со своим изящным красивым идеальным решением )) Commented 12 февр. 2017 в 8:35
-
ну я предложил с дивами, нормальное решение, фон того дива который перекрывает рамку, совпадает с фоном основного дива, я не знаю что тут может быть непонятно... надо показать всю рамку - див становится прозрачным Commented 12 февр. 2017 в 9:35
-
@EugeneBartosh
надо показать
- покажите, никто вас не держит)) Commented 12 февр. 2017 в 10:12