修复 CSS 悬停时的按钮样式？

Question

在这个codepen 中，我通过在矩形末端叠加一个旋转了 90° 的正方形，创建了一个看起来像左箭头的图形。

但是，当我将鼠标悬停在它上面时，只有矩形按钮本身会改变它的背景颜色，而不是旋转的正方形，它看起来很尴尬。

如何让它们在悬停时同时改变？

我尝试在类上设置:hover 并将颜色设置为默认颜色但隐藏文本。

new Vue({
  el: '#app',
  data() {
    return {

    }
  }
})

.myButton {
  float: left;
  position: relative;
  border: 1px solid;
  border-right: none;
  width: 240px;
  height: 50px;
  cursor: pointer;
  margin-left: 60px;
}

.myButton:after {
  position: absolute;
  top: 50%;
  margin: -17.25px -119.5px;
  width: 35px;
  height: 35px;
  transform: rotate(45deg);
  background: #FF7319;
  content: ''
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-flex xs3>
        <v-btn color="#FF7319" class="myButton">+My Button</v-btn>
      </v-flex>
    </v-container>
  </v-app>
</div>

Answer 1

您的库会自动为按钮应用悬停效果，我尽力为您模仿：

.myButton:after {
    position: absolute;
    top: 50%; 
    margin: -17.25px -119.5px;
    width: 35px; 
    height: 35px;
    transform: rotate(45deg);
    background: #FF7319;
    content: '';
}
.myButton:hover{
  transition: box-shadow .4s ease-in-out;
}
.myButton:hover:after{
  box-shadow:  rgba(0,0,0,.1) 0 0 0 100px inset;
  transition: box-shadow 0.1s ease-in-out;
}

只有更改在 css 中。可能想针对时间调整一些过渡，但在我看来还是有点偏离。

编辑：我还在代码笔中将 after 伪元素的高度设置为 34.4px，因为它在那里对我来说排列得更好 - 恢复到原来的 35px。