Question

我有来自互联网的这个很棒的按钮，它有一个显示面向右侧的箭头的功能。现在，我有另一个按钮，它转到上一页，所以常识会说按钮上的箭头应指向左侧。

因此，我将所有与右动画有关的值更改为左动画的值，但它并没有完全奏效。

我不太了解这一点，这就是为什么我会问是否有更好理解这一点的人可以帮助我。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我在common.css中有这个CSS，它定义了一个标准＆＃39;按钮，并在找到此HTML的页面的样式表中，它会更改一些CSS（所以这里必须更改我的问题）以适应页面的需要。

CSS：

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

如果有人可以帮助我，我会很高兴。

干杯＆＃39;

修改

.button中的common.css也有宽度属性。

Answer 1

这样做：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

看看这个小提琴：https://jsfiddle.net/L04y8m9e/

作为替代方案，如果你真的需要保留原始的css，那么解决方案就是从＆＃34;按钮＆＃34;更改后退按钮的类。 to＆＃34; backbutton＆＃34;这样标准按钮css不适用，然后将所有按钮样式复制到新的＆＃34;后退按钮＆＃34;风格做出必要的改变。

看到这个小提琴：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;
}

Answer 2

这是您的固定代码：

.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

Answer 3

使用CSS3 transform属性。使用rotate(Xdeg)值。

有关此媒体资源的详情，您可以在http://www.w3schools.com/cssref/css3_pr_transform.asp或https://developer.mozilla.org/en-US/docs/Web/CSS/transform查看详情。

Answer 4

您好我编辑了您的代码并得到了类似的内容：

.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/

Answer 5

检查一下..

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;
}

HTML / CSS - 更改按钮以指向相反方向

5 个答案: