adding a class containing pseudo-element using Javascript

Question

Here is a shining effect created with pure CSS:

html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    display: table;
    background: #2f2f2f;
}

.body-inner{
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.button-container{
    position: relative;
    overflow: hidden !important;
    display: inline-block;
}

.button-container a h3{
    display: inline-block;
    margin: auto;
    color: #fff;
    padding: 20px 25px;
    border: 1px solid;
   
}

.button-container a h3:after {
    content: "";
    position: absolute;
    top: -130%;
    left: -210%;
    width: 200%;
    height: 300%;
    opacity: 0;
    transform: skew(-40deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}

.button-container a h3:hover:after {
    opacity: 1;
    /* top: 0%; */
    left: 30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
}

<body>
    <div class="body-inner">
        <div class="button-container">
            <a href="https://github.com/NadeeshaEranjan" target="_blank" class="btn">
                <h3>Hover on text to shine</h3>
            </a>
        </div>
    </div>
</body>

as you see when you hover over the container the shining occurs.

I wonder if there is a solution to add the shining effect using Javascript.

For instance, what if we want to see the shining effect by adding a class via Javascript to the container.

I have tried to create a class of all transitions in the code needed for the shining and add the class using javascript to the container but since the shining is created using a pseudo-element it's almost impossible for me to have a bit of luck!

Note: I don't want the CSS hover. I want to add shining whenever I add a class using javascript.

So make a sure that has a class, add the class with JavaScript. — epascarello
– epascarello, Commented Aug 20, 2020 at 20:01

epascarello · Accepted Answer · 2020-08-20 20:14:23Z

2

Add a class to the css rule, remove the hover and toggle the class

var elem = document.querySelector('.button-container')
window.setInterval(()=>elem.classList.toggle('active'), 1000);

html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    display: table;
    background: #2f2f2f;
}

.body-inner{
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.button-container{
    position: relative;
    overflow: hidden !important;
    display: inline-block;
}

.button-container a h3{
    display: inline-block;
    margin: auto;
    color: #fff;
    padding: 20px 25px;
    border: 1px solid;
   
}

.button-container a h3:after {
    content: "";
    position: absolute;
    top: -130%;
    left: -210%;
    width: 200%;
    height: 300%;
    opacity: 0;
    transform: skew(-40deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}

.button-container.active a h3:after{
    opacity: 1;
    /* top: 0%; */
    left: 30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
}

<body>
    <div class="body-inner">
        <div class="button-container">
            <a href="https://github.com/NadeeshaEranjan" target="_blank" class="btn">
                <h3> text to shine</h3>
            </a>
        </div>
    </div>
</body>

edited Aug 20, 2020 at 20:14

answered Aug 20, 2020 at 20:05

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

G-Cyrillus Over a year ago

its alike animation / keyframes ;) Maybe the op did not know about it :) Not sure about the need of javascript. +1

johannchopin · Accepted Answer · 2020-08-20 20:13:43Z

Instead of using the css :hover selector use directly a class (let say animate). If you click on the button Animate me, the class will be added to the h3 and animate it:

function animate() {
  document.querySelector('h3').classList.add("animate");
}

document.getElementById('animate').addEventListener("click", animate);

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  display: table;
  background: #2f2f2f;
}

.body-inner {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.button-container {
  position: relative;
  overflow: hidden !important;
  display: inline-block;
}

.button-container a h3 {
  display: inline-block;
  margin: auto;
  color: #fff;
  padding: 20px 25px;
  border: 1px solid;
}

.button-container a h3:after {
  content: "";
  position: absolute;
  top: -130%;
  left: -210%;
  width: 200%;
  height: 300%;
  opacity: 0;
  transform: skew(-40deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}

.button-container a h3.animate:after {
  opacity: 1;
  /* top: 0%; */
  left: 30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

<body>
  <div class="body-inner">
    <div class="button-container">
      <a href="https://github.com/NadeeshaEranjan" target="_blank" class="btn">
        <h3>Hover on text to shine</h3>
      </a>
    </div>
  </div>

  <button id="animate">
    Animate me
  </button>
</body>

Collectives™ on Stack Overflow

adding a class containing pseudo-element using Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related