CODEWITHSUNDEEP
javascriptcssvuetify.js
Somethingwhatever
Somethingwhatever

Reputation: 1348

Fix button styling on CSS hover?

In this codepen, I've created a graphic that looks like a left-pointing arrow by superimposing a 90° rotated square over the end of a rectangle.

However, when I hover over it, only the rectangular button itself changes its background color, not the rotated square and it looks awkward.

How can I make them both change simultaneously when hovering?

I tried setting up the :hover on the class and setting the color to the default color but hides the text.

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/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 2

Views: 1105

Answers (1)

TCooper
TCooper

Reputation: 1900

Your library is automatically applying a hover effect to the button, I mimicked it for you best I could:

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

Only changes are in css. Might want to tweak the transitions some for timing, still looks a little off to me.

EDIT: I also made the height of the after pseudo element 34.4px in the code pen because it lined up better for me there - reverted back to your 35px original.

Upvotes: 1

Related Questions