Simple Neon Effect with PNG

Simple Neon Effect with PNG using CSS3

by Rodrigo Portillo

HTML

<button id="turnOn">
Turn On / Off
</button>
<div class="neon_area">
  <div class="neon_on">
  </div>
</div>
by Rodrigo Portillo (velhobit.com.br)

CSS

.neon_area,
.neon_on{
  width: 500px;
  height: 500px;
  margin-bottom: 20px;
  background-color: black;
  border-radius: 5px;
  background-position: center center;
  background-image: url('https://velhobit.com.br/joy/star-a.png');
  background-repeat: no-repeat;
  background-size: 500px 500px;
  
  transition: 1s all ease-out;
}

.neon_on{
  opacity: 0;
}

.neon_area.on .neon_on{
  background-image: url('https://velhobit.com.br/joy/star-b.png');
  opacity: 1;
}

JavaScript

$("#turnOn").click(function(){
	$(".neon_area").toggleClass("on");
});