Помогите сделать кнопку css html js
240
18 августа 2018, 03:10
Смотрите пример сразу. Не знаю как сделать чтобы двигалась только стрелка. У меня же двигается само туловище вместе со стрелкой. Вообщем нужно чтобы в прямоугольнике двигалась только стрелка направо, и нечего больше. И не предлагайте центровать элемент, тогда надпись сдвигается вместе со стрелкой. По большей части css, но если есть вариант как решить на js - предлагайте!
.button {
background-color: #fff;
border: 1px solid black;
color:black;
padding: 20px;
text-align: left;
}
.button span:after {
z-index: 5;
content: '>';
opacity: 1;
transition: all 1s;
}
.button:hover span:after {
opacity: 1;
padding-left: 20px;
}<button class="button">Clickme <span></span></button>Answer 1
Вместо padding можно использовать transform:translateX(20px);
.button {
background-color: #fff;
border: 1px solid black;
color:black;
padding: 20px;
text-align: left;
}
.button span:after {
z-index: 5;
content: '>';
opacity: 1;
transition: all 1s;
display:inline-block;
}
.button:hover span:after {
opacity: 1;
transform:translateX(20px);
}<button class="button">Clickme <span></span></button>Answer 2
.button {
background-color: #fff;
border: 1px solid black;
color: black;
padding: 20px;
padding-right:30px;
text-align: left;
}
.button span {
position:absolute;
z-index: 5;
opacity: 1;
transition: all 1s;
}
.button:hover span {
opacity: 1;
margin-left:20px;
}<button class="button">Clickme <span> »</span></button>
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50339 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31950 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26313 visits
- Как через css изменить цвет png изображения? 11770 visits
- Blob video url download 11316 visits
- Php curl запрос через прокси с авторизацией 10724 visits
- Работа с captcha vk api 9522 visits
© "hostciti.net" 27.3.2026 | 02:01