HTML/CSS - Сменить кнопку, чтобы указать в противоположном направлении

У меня есть эта удивительная кнопка из Интернета, в которой есть функция для отображения стрелки, направленной вправо. Теперь у меня есть еще одна кнопка, которая идет на предыдущую страницу, поэтому здравый смысл говорит, что стрелка на кнопке должна указывать налево.HTML/CSS - Сменить кнопку, чтобы указать в противоположном направлении

Таким образом, я изменил все значения, которые имеют отношение к правильной анимации, к значению для левой анимации, но это не совсем работает.

Я этого недостаточно понимаю, поэтому я спрашиваю, поможет ли мне кто-то, кто лучше понимает это.

.button { 
 
    border-radius: 4px; 
 
    background-color: #f4511e; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 28px; 
 
    padding: 20px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
    width: 200px; 
 
} 
 
.button > span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 
.button > span:after { 
 
    content: ' »'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 
.button:hover > span { 
 
    padding-right: 25px; 
 
} 
 
.button:hover > span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<button class='button'><span>Back</span> 
 
</button> 
 
<button class='button'><span>Again</span> 
 
</button>

У меня есть этот CSS в common.css, который определяет кнопку «стандартный», так и в таблицах стилей на странице, где находится этот HTML, он изменяет некоторые CSS (так здесь изменение моей проблемы должно быть выполнено), чтобы соответствовать потребности страницы.

CSS:

li:last-child .button { 
    width: 200px; 
    font-size: 22px; 
    padding: 13px; 
}

Если кто-то может помочь мне здесь, я был бы очень рад.

РЕДАКТИРОВАТЬ

CHEERS':

.button в common.css имеет также свойство ширины.

источник

2016-10-06 J van Amerongen

Как я работаю с двумя различными таблицами стилей, первый упомянутый CSS будет получить применяется, независимо от того, что. –

Сделайте это:

.button { 
 
    border-radius: 4px; 
 
    background-color: #f4511e; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 28px; 
 
    padding: 20px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
} 
 
.button > span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 
.forward > span:after { 
 
    content: ' »'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 
.back > span:after { 
 
    content: '« '; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    left: 0px; 
 
    transition: 0.5s; 
 
} 
 
.forward:hover > span { 
 
    padding-right: 25px; 
 
} 
 
.back:hover > span { 
 
    padding-left: 25px; 
 
} 
 
.forward:hover > span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
} 
 
.back:hover > span:after { 
 
    opacity: 1; 
 
    left: 0; 
 
}

<html> 
 

 
<body> 
 
    <button class='button back'><span>Back</span> 
 
    </button> 
 
    <button class='button forward'><span>Again</span> 
 
    </button> 
 
</body> 
 

 
</html>

Проверить эту скрипку: https://jsfiddle.net/L04y8m9e/

В качестве альтернативы, если вы действительно должны сохранить оригинальный CSS, то решение было бы изменить класс кнопки возврата от «button» до «backbutton», так что стандартная кнопка css не применяется, а затем копирует все стили кнопок в новые стили «backbutton», внося необходимые изменения.

Смотрите эту скрипку: https://jsfiddle.net/vg0oLuLh/

Новая версия HTML:

<button class='backbutton'><span>Back</span></button> 
<button class='button'><span>Again</span></button>

Новый CSS, чтобы добавить (старый CSS остается без изменений):

.backbutton { 
    border-radius: 4px; 
    background-color: #f4511e; 
    border: none; 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 28px; 
    padding: 20px; 
    transition: all 0.5s; 
    cursor: pointer; 
    margin: 5px; 
    width: 200px; 
} 

.backbutton > span { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    transition: 0.5s; 
} 
.backbutton > span:after { 
    content: '« '; 
    position: absolute; 
    opacity: 0; 
    top: 0; 
    left: 0px; 
    transition: 0.5s; 
} 
.backbutton:hover > span { 
    padding-left: 25px; 
} 
.backbutton:hover > span:after { 
    opacity: 1; 
    left: 0; 
}

источник

2016-10-06 06:27:51

Эй, @ J-van-Amerongen, вы сначала задали мой ответ как правильное решение, но затем вернули, что , Есть ли что-то, что вам не хватает или что не работает для вас? –

Поскольку я работаю с двумя разными таблицами стилей, первый упомянутый CSS будет применяться, несмотря ни на что. Поэтому, когда я использую ваш код, он вообще не работает, так как кнопка '.back' не реагирует на зависание, а« .forward »просто перемещается. –

В этом случае, возможно, просто измените класс css в html. Удалите класс «кнопка» со всех кнопок «назад», а затем просто добавьте все, что отсутствует, в определение CSS класса «назад». –

Используйте свойство CSS3 transform. Играйте со значением rotate(Xdeg).

Для получения дополнительной информации об этой недвижимости, вы можете проверить ее данные на сайте http://www.w3schools.com/cssref/css3_pr_transform.asp, или https://developer.mozilla.org/en-US/docs/Web/CSS/transform.

источник

2016-10-06 06:14:04

Это не совсем то, что я имел в виду, так как это также вращает текст внутри '

Да, я понимаю, что вы имеете в виду, дайте мне минутку, и я получу то, что вам нужно :) –

Вот ваш фиксированный код:

.button { 
    border-radius: 4px; 
    background-color: #f4511e; 
    border: none; 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 28px; 
    padding: 20px; 
    transition: all 0.5s; 
    cursor: pointer; 
    margin: 5px; 
} 
.button > span { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    transition: 0.5s; 
} 
.buttonAgain > span:after { 
    content: ' »'; 
    position: absolute; 
    opacity: 0; 
    top: 0; 
    right: -20px; 
    transition: 0.5s; 
} 
.buttonBack > span:before { 
    content: '« '; 
    position: absolute; 
    opacity: 0; 
    top: 0; 
    left: -70px; 
    transition: 0.5s; 
} 
.buttonAgain:hover > span { 
    padding-right: 25px; 
} 
.buttonBack:hover > span { 
    padding-left: 25px; 
} 
.buttonAgain:hover > span:after { 
    opacity: 1; 
    right: 0; 
} 

.buttonBack:hover > span:before { 
    opacity: 1; 
    right: 0; 
}

Here is the JSFiddle demo

источник

2016-10-06 06:25:18

Человек, которого ты избил меня, почти готов. –

Я отредактировал свой код с свойством 'width', но теперь, когда я запускаю ваш код, стрелка неподвижна, и когда я покидаю кнопку, стрелка делает ее анимацию на крайняя левая сторона (что нормальная кнопка не делает) –

Можете ли вы дать мне JSFiddle для проблемы? :) Я постараюсь помочь :) –

Привет ивы изменяли код и получили что-то вроде этого:

.button:first-child > span { 
cursor: pointer; 
display: inline-block; 
position: relative; 
transition: 0.5s; 
} 
.button:first-child > span:before { 
content: '» '; 
position: absolute; 
opacity: 0; 
top: 0; 
left: -20px; 
transition: 0.5s; 
} 
.button:first-child:hover > span { 
padding-left: 25px; 
} 
.button:first-child:hover > span:before { 
opacity: 1; 
left: 0; 
}

здесь рабочий пример: https://jsfiddle.net/xde9046k/2/

источник

2016-10-06 06:26:59

Когда я нажимаю кнопку «назад», появляется стрелка, указывающая влево. –

Проверьте это ..

HTML:

<button class='button'><span>Back</span></button> 
<button class='button'><span>Again</span></button>

CSS:

.button { 
    border-radius: 4px; 
    background-color: #f4511e; 
    border: none; 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 28px; 
    padding: 20px; 
    transition: all 0.5s; 
    cursor: pointer; 
    margin: 5px; 
} 
.button > span { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    transition: 0.5s; 
} 
.button > span:before { 
    content: ' <<'; 
    position: absolute; 
    opacity: 0; 
    top: 0; 
    left:-10px; 
    transition: 0.5s; 
} 
.button:hover > span { 
    padding-left: 25px; 
} 
.button:hover > span:before { 
    opacity: 1; 
    left: -10px; 
}

источник

2016-10-06 06:30:29 Kumaraguru

HTML/CSS - Сменить кнопку, чтобы указать в противоположном направлении

ответ

Смежные вопросы