Shopify Question posted in
The Shopify help center can be found here.

CSS Transparent On Hover After CSS Transition – Shopify

I am trying to make the button background transparent after the CSS transition on Shopify, but can’t seem to do so. Please help.

Here are my CSS codes:

.btn.btn1::before {
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms ease-in-out;
  background: #E9E9E9;
}

.btn.btn1:hover::before,
.btn.btn1:focus::before {
  transform: scaleX(1);
}

.btn.btn1:hover {
  color: gray !important;
  z-index: 1;
}

.btn.btn1:hover:after {
  transform: translateX(0px);
}

Site: https://polished-london.myshopify.com/
Password: home

Tags:

2

Answers


  1. 0

    You could just add an animation to the .btn.btn1:hover::before, .btn.btn1:focus::before selectors that would cause the background of the ::before pseudo element to be transparent after the background changes color. To see where the main change is, you can look in the "IMPORTANT CODE" section.

    .btn.btn1::before {
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  /*width: 100%;
  height: 100%;*/
  width: 200px;
  height: 50px;
  position: absolute;
  z-index: -1;
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms ease-in-out;
  background: #E9E9E9;
}

/* IMPORTANT CODE */

@keyframes make-transparent {
  to {
    background: transparent;
  }
}

.btn.btn1:hover::before,
.btn.btn1:focus::before {
  transform: scaleX(1);
  /* First number is animation duration, and the second number is the animation delay. */
  /* Adjust them however you'd like. */
  animation: make-transparent 600ms 600ms forwards;
}

/* END IMPORTANT CODE */

.btn.btn1:hover {
  color: gray !important;
  background: transparent;
  z-index: 1;
}

.btn.btn1:hover:after {
  transform: translateX(0px);
}

/* Some of my own styles.  Not important */
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.btn.btn1 {
  position: relative;
  border: 1px solid;
  font-family: 'Segoe UI', sans-serif;
  text-decoration: none;
  color: black;
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* End of personal styles */
    <a class="btn btn1" href="#">Howdy</a>
    Login or Signup to reply.
  2. 0

    You should exactly specify which button you are referring to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search