What is the CoodeVerse Enhanced View More Button?

The CoodeVerse Enhanced View More Button is a free downloadable HTML CSS JS UI component — a premium glassmorphic button with sweeping shine on hover (CSS ::before pseudo-element skewX), purple box-shadow glow + scale transform, SVG arrow animation (translateX + rotate), and a click-triggered loading spinner with auto-reset after 2 seconds. Ready for use as a view more, load more, or CTA button. Full source code free to download.

How do you create a CSS shine sweep effect on a button hover?

Add a ::before pseudo-element with position:absolute, width:60%, height:100%, a transparent-white-transparent linear gradient, and transform:skewX(-25deg). Set left:-120% by default. On :hover, transition left to 120% with transition:0.5s. The parent button needs overflow:hidden to clip it. This is exactly the technique used in the CoodeVerse Enhanced View More Button.

How do you make a CSS glow box-shadow button hover effect?

On the button's :hover selector, set box-shadow:0 0 35px 8px rgba(124,58,237,0.8). The first two zeroes are x and y offset (centred glow), 35px is blur radius, 8px is spread radius, and rgba controls the colour and opacity. Combine with transform:scale(1.1) for the lift effect. The CoodeVerse Enhanced View More Button uses this exact purple glow.

How do you add a loading spinner to a button in CSS and JavaScript?

Create a div inside the button with position:absolute, fixed size (24x24px), a border with border-top-color set to your accent colour, border-radius:50%, and animation:spin 0.8s linear infinite using @keyframes spin {to{transform:rotate(360deg)}}. Set display:none by default. In JavaScript, on click: set spinner.style.display='block', hide the arrow, change label text to 'Loading...'. Use setTimeout to reset after 2 seconds. The CoodeVerse View More Button uses this exact pattern.

How do you animate an SVG arrow on button hover with CSS?

Target the SVG element on button :hover with transform:translateX(8px) rotate(15deg). Set transition:0.3s ease on the SVG and transform-origin:50% 50% so it rotates around its centre. Change stroke colour on hover (stroke:var(--accent1)) for a colour shift effect. The CoodeVerse Enhanced View More Button uses these properties on the inline SVG arrow.

Can I use this button for a 'Load More' pagination feature?

Yes. The button is designed exactly for view more, load more, show more, and pagination use cases. In the JavaScript, replace the setTimeout mock with a real fetch() call to your API. On click: show spinner, await response, append new items to your list, then reset the button. The loading state provides clear visual feedback during the async operation.

Is this view more button free to download?

Yes. 100% free — no account, payment, or sign-up. Download the full ZIP with HTML, CSS, and JavaScript under Creative Commons Attribution 4.0. Use freely in personal or commercial projects.

Does this button work on mobile devices?

Yes. The button uses CSS transitions and transforms that work on all modern mobile browsers. On touchscreen devices, the hover state triggers on touch tap. The loading spinner and label changes work identically on mobile. No JavaScript libraries or device-specific code required.

Enhanced View More Button

Updated March 2026

Windows Tip: After downloading the ZIP, right-click the folder → Properties → check "Unblock" (if visible) → Apply → OK. This removes the "file came from another computer" warning so everything works perfectly!

HTML

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced View More Button</title>
</head>
<body>
  <button class="viewmore-btn" id="viewMoreBtn">
    <span id="labelText">View More</span>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
    <div class="spinner" id="spinner"></div>
  </button>
</body>
</html>

:root {
  --bg: #0f172a;
  --accent1: #06b6d4;
  --accent2: #7c3aed;
  --accent3: #ec4899;
}

body {
  margin: 0;
  font-family: Inter, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,0.15), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(6,182,212,0.15), transparent 50%),
    var(--bg);
}

.viewmore-btn {
  position: relative;
  padding: 18px 52px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  color: white;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.viewmore-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 35px 8px rgba(124, 58, 237, 0.8);
}

/* Shine sweep pseudo-element */
.viewmore-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
}

.viewmore-btn:hover::before { left: 120%; }

/* SVG arrow animation */
.viewmore-btn svg {
  width: 26px;
  height: 26px;
  stroke: white;
  stroke-width: 2.5;
  transition: 0.3s ease;
  transform-origin: 50% 50%;
}

.viewmore-btn:hover svg {
  transform: translateX(8px) rotate(15deg);
  stroke: var(--accent1);
}

/* Loading spinner */
.spinner {
  position: absolute;
  right: 16px;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

const btn = document.getElementById('viewMoreBtn');
const spinner = document.getElementById('spinner');
const label = document.getElementById('labelText');
const arrow = btn.querySelector('svg');

btn.addEventListener('click', () => {
  label.textContent = 'Loading...';
  arrow.style.display = 'none';
  spinner.style.display = 'block';

  setTimeout(() => {
    spinner.style.display = 'none';
    arrow.style.display = 'block';
    label.textContent = 'View More';
  }, 2000);
});

Project	Tech	Key Concepts	Price
Ather	HTML5 Canvas + JS	Projectile physics, power bar, particles	Free
Animated Delete Button	HTML5 Canvas + JS	Gravity, bounce coefficient, trails	Free
Color Gussing Game	HTML + CSS + JS	CSS gradients, SaaS layout, dark UI	Free
Epic Fitness	HTML + CSS + JS	CSS keyframes, DOM manipulation	Free
Cosmos Star Animation	HTML + Canvas + JS	Canvas particles, rAF, starfield	Free
Dominos	HTML + CSS + JS	CSS 3D transforms, perspective	Free
Firework	HTML + CSS	CSS variables, transitions	Free

What is the CoodeVerse Enhanced View More Button?

Free Enhanced View More Button — CSS Glassmorphism, Shine Hover Sweep, Purple Glow Scale, Animated SVG Arrow & JavaScript Loading Spinner

Enhanced View More Button

CSS Techniques Explained

CSS Glassmorphism

Shine Sweep via ::before

Box-Shadow Glow + Scale

SVG Arrow Animation

CSS @keyframes Spinner

JS Button Loading State

How to Build an Enhanced View More Button with CSS & JS

All Free HTML CSS JS Projects on CoodeVerse

People Also Ask

Frequently Asked Questions

Is this view more button free?

How do I change the glow colour?

Can I use this in a React or Vue project?

How do I increase the shine speed?

Why is overflow:hidden important on the button?

How do I disable the button during loading?

Can I add this button to my developer portfolio?

What is transform-origin used for here?

Related Searches

Related Projects & Courses

Download Enhanced View More Button — Free