Custom Made Arcade Glowing Buttons For Your Web Projects

I have a correct mood to make a couple of
new decoration elements for the website.
Two different neon glowing buttons:
first one is activated on desktop upon hovering mouse cursor
[neon glowing RGB edge]
second one is accessible on the cell phone
[rotating conic gradient]
Media queries will detect resolution and
show appropriate button for you.
To observe the second button switch to mobile view.

DESKTOP BUTTON


@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  transition: all 0.5s ease-in-out;
  inherits: false;
}


.list__footer-readmore {
	float: right;
	padding-left: 24px;
	padding-right: 24px;
	margin-top: 10px;
	border: none;
	background: transparent;
	outline: 2px white solid;
	position: relative;
        transition: all 1s ease-in-out;
        z-index: 100 !important;
}


.list__footer-readmore::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -2;
  background: conic-gradient(from var(--angle), 
    red, orange, yellow, green, blue, indigo, violet, red);
  opacity: 0;
  transition: opacity 0.5s ease;
}


.list__footer-readmore::after {
    content: "";
  position: absolute;
  inset: 0;
  background: #111; 
  z-index: -1;
}

.list__footer-readmore:hover::before {
  opacity: 1;
  animation: spin-border 2.4s linear infinite;
  opacity: 0.8;
  transition: all 1s ease-in-out;
}


@keyframes spin-border {
  to { --angle: 360deg; }
}

MOBILE BUTTON

.list__footer-readmore  {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 12px;
  font-size: 20px;
  padding-bottom: 8px;

	}

.list__footer-readmore:hover::before {
	animation: none;
	background: transparent;
	outline: 4px red solid;
	background: rgba(0,255,0, 0.6);
	transition: all 0.4 ease-in-out;
}


.list__footer-readmore::before {
  content: "";

  inset: -4px;
  z-index: 111;
  background: conic-gradient(from var(--angle), 
    red, orange, yellow, green, blue, indigo, violet, red);
  opacity: 1;
  animation: spin-border 4.4s linear infinite;
  opacity: 0.3;
  transition: all 1s ease-in-out;
}

░▒▓█ ╚ Categories ▼▼▼

░▒▓█ ╚ Tags ▲▲▲