Dive into an interactive control panel experience featuring magnetic hover effects, spring easing, and pulsating accents for captivating user engagement.
1
2
3<section class="gs-stage">
4 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
5 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
6 <div class="gs-panel">
7 <div class="gs-panel-inner">
8 <h1 class="gs-title">Control Your Space</h1>
9 <div class="gs-controls">
10 <div class="gs-button" tabindex="0">
11 <span class="gs-button-icon">
12 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
13 <circle></circle>
14 <line></line>
15 <line></line>
16 </svg>
17 </span>
18 <span class="gs-button-label">Action 1</span>
19 </div>
20 <div class="gs-button" tabindex="0">
21 <span class="gs-button-icon">
22 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
23 <polygon></polygon>
24 </svg>
25 </span>
26 <span class="gs-button-label">Action 2</span>
27 </div>
28 <div class="gs-button" tabindex="0">
29 <span class="gs-button-icon">
30 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
31 <path d="M12 8v8"></path>
32 <path d="M4.93 4.93a10 10 0 0 1 14.14 0"></path>
33 <path d="M1 12h3"></path>
34 <path d="M20 12h3"></path>
35 <path d="M4.93 19.07a9.96 9.96 0 0 0 14.14 0"></path>
36 </svg>
37 </span>
38 <span class="gs-button-label">Action 3</span>
39 </div>
40 </div>
41 </div>
42 </div>
43</section>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.