按钮上的悬停效果不起作用 - CSS3

Question

Below is my HTML/CSS code in which I am trying to create a similar effect like HOME button as mentioned here - https://codepen.io/larrygeams/pen/pdchG

I made it to a single class, but my code is not working. Let me know what I am doing wrong here.

 .btn-primary { background: green; border: none; border-radius: 10px; padding: 10px 20px; color: #FFF; } .btn-primary:hover { color: #FFF; cursor: pointer; } .btn-primary:after { content: ""; height: 100%; left: 0; top: 0; width: 0px; position: absolute; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; z-index: -1; } .btn-primary:after:hover { background: red; width: 100%; height: 100%; } 

 <button class="btn-primary" type="submit"> <div class="inner">Add to bag</div> </button> 

My Non Working Codepen Link - https://codepen.io/anon/pen/gBdVoj?editors=1100

Answer 1

hover pseudo needs to be placed before ::after

:hover::after

 .btn-primary { width: auto; position: relative; background: green; border: none; border-radius: 10px; padding: 10px 20px; color: #FFF; z-index: 2; } .btn-primary:hover { cursor:pointer; } .btn-primary::after { content: ""; position: absolute; height: 100%; left: 0; top: 0; width: 0; border-radius: 10px; transition: all 0.3s ease 0s; z-index: -1; } .btn-primary:hover::after { width: 100%; background: red; } 

 <button class="btn-primary" type="submit">Add to bag</button>