Skip to content

Instantly share code, notes, and snippets.

View Patil-143's full-sized avatar

Patil-143

0 followers · 4 following
View GitHub Profile
@Patil-143
Patil-143 / index.html
Created December 12, 2023 14:16
Responsive Contact Form
<section id="contact">
<h1 class="section-header">Contact</h1>
<div class="contact-wrapper">
<!-- Left contact page -->
<form id="contact-form" class="form-horizontal" role="form">
@Patil-143
Patil-143 / index.html
Created December 14, 2023 05:32
Neon Button Animation UI
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <button style="--clr:#EA00FF"><span>Button</span><i></i></button> -->
<!-- <button style="--clr:#FFF01F"><span>Button</span><i></i></button> -->
<!-- <button style="--clr:#7FFF00"><span>Button</span><i></i></button> -->
@Patil-143
Patil-143 / button-hover-effect.markdown
Created December 14, 2023 05:33
Button hover effect
@Patil-143
Patil-143 / index.html
Created December 14, 2023 05:34
Neon Button
<button>
CLICK HERE
</button>
@Patil-143
Patil-143 / index.html
Created December 14, 2023 05:34
SVG play buttons
<svg width="25%" height="25%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0">
<rect class="buttonSides" x="5.04999" y="51" width="90.62" height="8" fill="#763AC2" />
<rect class="buttonSides" width="57" height="57" rx="8" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" fill="#763AC2" />
<g clip-path="url(#clip0_106_11)">
<rect class="buttonTop" width="57" height="57" rx="8" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" fill="#A661FF" />
<path class="buttonSides playSides" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" fill="#763AC2" />
<g class="glowAll" filter="url(#filter0_d_106_11)">
<path d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" fill="white" />
</g>
<g class="glowMe" opacity="0.5" filter="url(#filter1_f_106_11)">
@Patil-143
Patil-143 / animated-button-with-masked-border-speedycsstips.markdown
Created December 14, 2023 05:35
Animated button with masked border #SpeedyCSSTips! ⚡️
@Patil-143
Patil-143 / index.html
Created December 14, 2023 05:35
Sparkly Shiny Text ✨
<a href="#">
<!-- Drop as many sparkles in as you need and scope the speed -->
<svg viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
fill="#000"
/>
</svg>
<svg viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@Patil-143
Patil-143 / index.html
Created December 14, 2023 05:39
Modern Button Styles - 45 CSS Only Buttons
<body class="bg-gray-50">
<!-- Section Start -->
<section class="section pt-28 pb-20" id="home">
<div class="mx-10">
<div class="lg:flex justify-center">
<div class="text-center">
<div class="text-center">
<h1 class="text-4xl font-semibold leading-[50px] tracking-wide text-transparent bg-clip-text bg-gradient-to-l from-pink-400 to-blue-600 mb-10">
45 CSS Only Modern Button Styles
</h1>
@Patil-143
Patil-143 / a-pure-css-3d-maze.markdown
Created December 14, 2023 05:40
A Pure CSS 3D Maze!

A Pure CSS 3D Maze!

🌎 100% Natural ingredients! 🚳 No images 📵 No JavaScript 👨‍💻 Just CSS - And a sprinkling of HTML

💥 CHROME ONLY!!

🔗 https://linktr.ee/ivorjetski

@Patil-143
Patil-143 / index.html
Created December 14, 2023 05:41
jQuery | Custom Radio Buttons Survey
<div class="rb-box">
<!-- Radio Button Module -->
<p>1. On a scale of 1 to 5 how cubic are you?</p>
<div id="rb-1" class="rb">
<div class="rb-tab rb-tab-active" data-value="1">
<div class="rb-spot">
<span class="rb-txt">1</span>
</div>
</div><div class="rb-tab" data-value="2">