Codes & plugins
Enhance your website with easy-to-use CSS & HTML snippets
Looking for CSS code snippets or HTML/CSS plugins to make your website stand out? My shop has a wide range of ready-to-use web design snippets and interactive code plugins that you can add in minutes, no coding experience needed.
Whether you want to add animated buttons, hover effects, testimonial sliders, or interactive content blocks, my snippets are designed to be lightweight, responsive, and fully compatible with most website builders.
Button animations
Add playful, eye-catching “jelly” animation to your website buttons with this easy-to-use code! This product includes rich text documents containing everything you need:
CSS code to create the jelly animation effect
Example HTML button to show how to use it
Clear step-by-step instructions to add and customise the effect on your site
The files are delivered as rich text documents, so you can easily open, edit, and copy the code into your website builder or code editor. Perfect for freelancers, small businesses, or anyone wanting to add some fun, interactive flair to their site buttons without complicated setups.
If you want a simple, stylish way to make your buttons stand out, this jelly animated button code is just what you need!
Make your website buttons stand out with a sleek, glowing hover effect using this simple CSS code snippet! This product includes rich text documents with everything you need to get started:
CSS code to create a smooth glow animation when users hover over a button
Example HTML button showing exactly how to apply the effect
Step-by-step instructions to help you add and customise the glow on your site
The files are delivered as rich text documents, making it easy to open, copy, and paste the code into your website builder or code editor. Ideal for freelancers, creatives, and small businesses looking to add subtle, modern flair to their calls-to-action without any complicated setup.
If you want to draw attention to your buttons in a classy, interactive way — this glow on hover effect is the perfect touch!
Bring your call-to-action buttons to life with a sleek, modern gradient animation! This Gradient Shift Button CSS code snippet adds a smooth colour transition when users hover over your button, perfect for making your website feel more interactive and professional.
Your download includes everything you need to get started:
Clean CSS code to create the gradient shift animation
Example HTML button showing how to apply the effect
Step-by-step instructions for adding and customising it on your site
Delivered as a rich text document, the code is easy to copy, paste, and edit in your website builder or code editor. Whether you’re a freelancer, small business owner, or creative, this animated button effect will make your website stand out with a modern, polished finish.
Content layouts
Add a modern, minimal accordion to your website with this easy-to-use CSS plugin — perfect for FAQs, service lists, or any content you'd like to keep tidy and collapsible. Designed with usability in mind, this accordion opens one section at a time and includes a soft drop shadow, rounded corners, and simple, clean typography. No JavaScript required — just copy, paste, and customise.
Download a sleek, fully responsive testimonial slider with continuous scrolling animation, designed using clean HTML, CSS, and lightweight JavaScript. Perfect for showcasing client feedback or customer reviews on any website platform — including Squarespace, WordPress, Wix, Shopify, and custom HTML pages.
This modern review carousel features a seamless infinite scroll, subtle card hover effects, and a soft edge fade to keep the focus on your testimonials. Display three cards at a time on desktop, and scale down smoothly on mobile for the perfect user experience.
Built for performance, easy to customise, and crafted with no external libraries — this is the perfect way to add stylish, moving testimonials to your site without slowing it down.
Key Features:
Smooth, continuous auto-scroll animation (infinite loop)
HTML, CSS, and ultra-light JavaScript (no libraries required)
Fully responsive for desktop, tablet, and mobile
Subtle hover and shadow effects for modern design
Duplicate content script for seamless looping
Works on all platforms: Squarespace, WordPress, Wix, Shopify, HTML
Customisable colours, speed, layout, and text
Optimised for speed, usability, and user trust
Perfect for small business websites, portfolios, product pages, or agency sites that need professional testimonials or client reviews.
Give your site a confident, punchy edge with this bold CSS-only testimonial carousel. Designed with clean structure and smooth fade transitions, this carousel rotates through client reviews automatically—no JavaScript required.
Perfect for service-based businesses, freelancers, or anyone wanting to build trust with real testimonials while keeping code lightweight and easy to manage.
Features
• 100% CSS—no scripts, no dependencies
• Visually engaging fade-in/fade-out transitions
• Accessible HTML markup with ARIA support
• Fully responsive for desktop and mobile
• Styled with soft colours, rounded corners, and elegant shadows to suit modern branding
Just drop in the code, edit the testimonials, and you're good to go. The animation timings are easy to tweak, and the layout fits beautifully into Squarespace or any custom site.
Ideal for websites that value simplicity, speed, and clean visual storytelling.
Upgrade your website with this sleek, fully responsive interactive vertical timeline! Featuring a smooth-moving marker that highlights the timeline event nearest the centre of the screen as users scroll, this component is perfect for showcasing processes, project steps, or milestones in a clean, modern style.
All-in-one HTML file: Includes self-contained CSS and JavaScript for easy setup — just copy and paste!
Customisable design: Colours, fonts, sizes, and event content can be effortlessly tailored to your brand.
No dependencies: Works in all modern browsers without the need for frameworks or libraries.
User-friendly & accessible: Clear layout with smooth animation enhances user engagement and understanding.
Ideal for freelancers, agencies, businesses, or bloggers looking to visually communicate timelines, workflows, or histories with a professional touch.
Download now to instantly add an eye-catching timeline to your site, complete with simple instructions for quick implementation!
Interactive Blocks
Create urgency and excitement with this sleek, code-only countdown timer — perfect for launches, ticketed events, restocks, or time-limited offers.
Looking to build hype before an event or launch? This fully customisable countdown timer is lightweight, elegant, and drops straight into any Squarespace section or custom site—no third-party plugins or bloated scripts.
What makes it great:
• Clean, modern design with a light grey background and bold black typography
• Uses Squarespace’s Swear Display font for a cohesive branded look
• Counts down to a specific date and time (set to 15 August 2025 by default)
• Displays time left in days, hours, minutes and seconds – all on one line
• Shows a custom message when time runs out ("🎶 It's showtime!")
• One line of code to install – no need to manage apps or integrations
• Fully responsive and works beautifully on desktop and mobile
• Customisable for any future event, date, or style changes
Perfect for:
• Musicians promoting live shows
• Service providers launching a new product
• Creators teasing a limited release
• Coaches and freelancers running special offers
• Small businesses creating urgency around signups or events
Just copy and paste the code into a Squarespace Code Block. Swap out the date, tweak the colours or fonts if you want, and you’re ready to go. Ideal for anyone who wants to add a touch of excitement and professionalism to their website; without needing complex tools.
Catch your visitor’s attention with this clever browser-based plugin.
When someone switches to a different tab, your website tab will update with a custom message like: "👋 Hey, come back!" or "We miss you!"
This fun feature is perfect for encouraging visitors to return and re-engage with your site.
Works on:
• Squarespace (Business/Core plan or higher)
• Wix, WordPress, Shopify
• Custom HTML sites
• Any site that allows header code injection
Features:
• Easy install using header code
• Fully customisable message
• Uses lightweight JavaScript (no libraries required)
• Compatible with Chrome, Safari, Firefox, Edge, and Opera
What You Get:
• Full JavaScript snippet
• Plain-text install instructions (READ ME)
• Option to customise the tab message
Requirements:
• Your site must allow JavaScript in the <head> section
• Not supported on platforms without code injection access
Add a small but powerful boost to your site engagement with this fun little trick!
Show your customers your service plans with this sleek, modern pricing table snippet. Featuring a clean layout with white, grey, and black colours, it’s designed to fit seamlessly into any website. The pricing table is fully responsive, ensuring it looks great on desktops, tablets, and mobiles.
This snippet uses pure HTML and CSS, no JavaScript needed — making it lightweight and easy to customise.
Works on:
• Custom HTML sites
• WordPress, Wix, Squarespace (in Custom Code blocks)
• Any platform that supports HTML & CSS
Features:
• Clean, modern monochrome design
• Fully responsive and mobile-friendly
• Easy to edit plan names, prices, and features
• Subtle hover effects for a polished user experience
• ‘Choose Plan’ buttons ready to link to any URL or checkout page
What You Get:
• Complete HTML & CSS code
• Simple plain-text install instructions (README)
• Clear guidance for linking buttons to your own URLs
Requirements:
• Platform must allow custom HTML & CSS
• No JavaScript support needed
Add a professional and stylish pricing table to your site in minutes with this easy-to-use snippet!
Download a modern, fully responsive contact form built with clean CSS code. Easily embed this stylish contact form on any website platform. No extra libraries needed.
Add a stylish, modern contact form to your website with this fully responsive CSS snippet.
This form features floating labels, a clean layout, and a subtle hover effect to keep your site looking sharp and easy to use.
You can easily embed this contact form on any platform – Squarespace, Wix, WordPress, Shopify, or custom HTML sites.
It’s quick to set up, simple to customise, and doesn’t need any extra libraries or plugins.
Key Features:
Pure HTML & CSS (no JavaScript required)
Fully responsive and mobile-friendly
Customisable colours, fonts, and button text
Floating labels for a modern look
Works on any website platform
Lightweight and fast loading
Perfect for anyone who wants a clean contact form that looks good and works straight away.
Add a sleek, modern search bar to your website with this fully responsive HTML and CSS snippet. It features subtle placeholder animations and a clean design that fits perfectly on any page.
This snippet is pure CSS and HTML, no JavaScript required — making it lightweight and easy to integrate across platforms.
Ideal for designers and developers who want a stylish search input ready to connect with Google Site Search, CMS search engines, or custom backend solutions.
Works on:
• Squarespace, Wix, WordPress, Shopify
• Custom HTML websites
• Any platform that supports HTML and CSS injection
Features:
• Smooth placeholder animation and subtle icon
• Rounded, clean input with shadow effects
• Simple form structure easy to customise
• Fully responsive and mobile-friendly
What You Get:
• Complete HTML + CSS code snippet
• Easy-to-follow README with installation & search setup instructions
Requirements:
• Ability to add HTML and CSS code to your website
• Optional: connect to Google or CMS search for actual results
Add a professional and modern search experience to your site without any JavaScript hassle!
Download a modern, fully responsive service card with a smooth hover animation, built using clean HTML and CSS. Easily embed this stylish hover card on any website platform—no JavaScript or external libraries required.
Add a sleek, professional service or product card to your site with this fully responsive snippet.
This card features a subtle lift effect, smooth shadow transition, and clean design to make your content stand out.
You can use it on any platform—WordPress, Wix, Squarespace, Shopify, or custom HTML/CSS projects.
It’s easy to implement, quick to customise, and optimised for performance.
Key Features:
Pure HTML & CSS (no JavaScript required)
Smooth hover lift & shadow animation
Fully responsive and mobile-friendly
Customisable text, styles, and layout
Works on any website platform
Lightweight and fast loading
Perfect for showcasing services, products, team members, or blog content with a modern, interactive touch.
Visually showcase your transformations, makeovers, or edits with this responsive Before & After Image Slider. This easy-to-use snippet features a smooth drag-to-reveal effect, letting your website visitors toggle between two images to compare results interactively.
Designed with a square 1:1 aspect ratio, the layout works perfectly for face comparisons, skin transformations, product edits, and more. The slider uses clean HTML, CSS, and lightweight JavaScript for smooth performance across all devices.
Works on:
• Custom HTML websites
• WordPress, Wix, Squarespace (via Code Block / Embed)
• Any platform that supports HTML, CSS, and basic JS
Features:
• Interactive before-and-after photo comparison
• Clean and modern design with smooth sliding effect
• Fully responsive (works on desktop, tablet, mobile)
• Touch support for mobile drag interaction
• Easy to change image links and adjust styling
• Uses only native HTML, CSS & JavaScript — no libraries required
What You Get:
• Full HTML, CSS & JavaScript code
• Simple, easy-to-follow README with setup instructions
• Guidance for adding your own images and customising the layout
Requirements:
• Platform must support custom HTML, CSS, and JavaScript
• Images must be the same dimensions for best results
Quickly add a professional, interactive image comparison feature to your site — ideal for beauty, design, skincare, photography, or fitness progress showcases.
Want to read more about useful CSS & HTML snippets and plugins for Squarespace, Wix, and other website builders?
Check out my blog: 9 Stylish HTML & CSS Snippets to Elevate Your Website Design, packed with examples, inspiration, and ideas you can use on your site.
With my collection of stylish HTML & CSS code snippets, you can:
Enhance buttons with fun hover animations
Add interactive content layouts like accordions and sliders
Build modern, responsive pricing tables and contact forms
Implement small but impactful UX improvements like countdown timers or before/after image sliders
Each snippet comes with clear instructions, so you can drop it straight into your site and see instant results. Perfect for freelancers, small businesses, or hobby web designers looking to save time while keeping their websites professional and engaging.
Why my CSS & HTML snippets are a must-have:
Works with Squarespace, WordPress, Wix, Shopify, and custom HTML sites
Fully responsive for mobile and desktop
Clean, modern designs that fit any style
Affordable and instantly downloadable
Browse my full collection and start upgrading your site today. Add jelly buttons, animated hover effects, testimonial carousels, and more to create a polished, professional website in minutes.