Помогите сделать кнопку css html js

196

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>&nbsp;&raquo;</span></button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Что делать, если некоторые объекты в сайте проваливаются через viewport?

Недавно сделал сайт, и вроде бы все ничегоВот только объекты каталога (нажмите на кнопку чтобы он открылся) при просмотре с телефона проваливаются...

187

HTML

Не получается код HTML + CSS + JS

Помогите, пожалуйста, пытался сделать слайдер на HTML + CSS + JS, в итоге не работает

213

HTML

2 меню slideout js

При клике на Panel меню слева наезжает и неудобно нажимать на кнопку panel + появляется меню от Catalog PanelА само меню не отображается

205

jQuery

Как сделать подгрузку disabled date сразу?

Моя задача чтобы в каждом новом календаре, были неактивны даты выбранные в предыдущемДумал выбранные даты записывать в массив и делать их disabled

207