Member Avatar for peterpa

hello friend please any one tell how can i create this kind of images which is used here in this website http://www.npkgroups.com, menu link

  • 3 Contributors
  • 2 Replies
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by niranga

Dani AI

Generated

A compact, practical way to reproduce the glossy menu icons mentioned by . Replies from and point at ready-made packs; the notes below show a reproducible workflow and a small HTML/CSS example using modern techniques (SVG for the glyph, CSS for the glossy shell). This keeps icons crisp at any size, makes hover/focus states simple, and avoids lots of image slicing.

A short workflow:

  • Inspect the existing size, corner radius, and hover behavior with the browser devtools.
  • Decide vector (SVG) for crisp scaling or raster (PNG) for complex textures. SVG is recommended for UI icons.
  • Build a rounded base (gradient + soft outer shadow). Add an inset highlight (pseudo-element or inset box-shadow) to get the glossy top.
  • Place the glyph as a single-color SVG so its color can be changed with CSS.
  • Export SVG inline or as a sprite; if using PNG, export at 2x and serve scaled-down for retina devices.
  • Add transitions for hover/focus and provide keyboard focus styles and aria-labels for accessibility.
  • Check any icon pack license before use (commercial vs. free).

Example markup + CSS to reproduce the shell and hover (replace the .icon background with an inline SVG or sprite):

<a class="menu-btn" href="#" aria-label="Services">
  <span class="icon" aria-hidden="true"></span>
  <span class="label">Services</span>
</a>
.menu-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#ffffff, #d6ecff);
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
  color: #034;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.menu-btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0));
  pointer-events: none;
}
.menu-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.22); }
.icon { width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; }

Final notes: ready-made packs are fastest (as noted) and icon archives are an easy source (as suggested), but a small custom SVG + CSS approach gives best scalability, fewer HTTP requests, and easier theming. Check licenses before reusing third-party icons.

Recommended Answers

All 2 Replies

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.