Исправить стиль кнопки на CSS при наведении? - PullRequest
Новая
       13

Исправить стиль кнопки на CSS при наведении?

2 голосов
/ 02 марта 2020

В этом коде я создал график c, который выглядит как стрелка влево, наложив повернутый на 90 ° квадрат над концом прямоугольника.

Однако при наведении на него курсора изменяется только фоновая кнопка angular, а не повернутый квадрат, и это выглядит неловко.

Как сделать так, чтобы они оба изменялись одновременно при наведении?

Я попытался установить :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>

1 Ответ

1 голос
/ 02 марта 2020

Ваша библиотека автоматически применяет эффект наведения на кнопку, я имитировал его для вас как мог: 

.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. Возможно, мне понадобится настроить некоторые переходы для синхронизации, но мне все еще это не нравится.

РЕДАКТИРОВАТЬ: Я также установил высоту псевдоэлемента после 34,4 пикселя в кодовой ручке, потому что он выстроился лучше для меня. - вернулся к вашему оригиналу 35px.

...