Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Add Modern Switch Button in CSS #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Haider-Mukhtar wants to merge 7 commits into quicksnip-dev:main from Haider-Mukhtar:main
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions public/consolidated/css.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,19 @@
],
"contributors": [],
"code": ".button {\n font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;\n background: #0a85ff;\n color: #fff;\n padding: 8px 12px;\n border: none;\n margin: 4px;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.button:hover {\n background: #0974ee;\n color: #fff\n}\n"
},
{
"title": "Switch Button",
"description": "A switch button with a beautiful style and effect.",
"author": "Haider-Mukhtar",
"tags": [
"button",
"switch",
"toggle",
"slider"
],
"contributors": [],
"code": "/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background: #d4acfb;\n border-radius: 50px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n border-radius: 50px;\n box-shadow: 0 0px 20px rgba(0,0,0,0.4);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch input:checked + .slider {\n background: #b84fce;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #b84fce;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.6em);\n width: 2em;\n height: 2em;\n bottom: 0;\n}\n\n/* HTML */\n<label class=\"switch\">\n <input type=\"checkbox\">\n <span class=\"slider\"></span>\n</label>\n"
}
]
},
Expand Down
297 changes: 297 additions & 0 deletions public/data/css.json
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,297 @@
[
{
"categoryName": "Typography",
"snippets": [
{
"title": "Responsive Font Sizing",
"description": "Adjusts font size based on viewport width.",
"code": ["h1 {", " font-size: calc(1.5rem + 2vw);", "}"],
"tags": ["css", "font", "responsive", "typography"],
"author": "dostonnabotov"
},
{
"title": "Letter Spacing",
"description": "Adds space between letters for better readability.",
"code": ["p {", " letter-spacing: 0.05em;", "}"],
"tags": ["css", "typography", "spacing"],
"author": "dostonnabotov"
},
{
"title": "Text Transformation",
"description": "It can be used to turn text into uppercase or lowercase letters, or capitalize the first letter of each word",
"code": [
"p.uppercase {",
" text-transform: uppercase;",
"}",
"",
"p.lowercase {",
" text-transform: lowercase;",
"}",
"",
"p.capitalize {",
" text-transform: capitalize;",
"}"
],
"tags": ["css", "typography", "text"],
"author": "Haider-Mukhtar"
}
]
},
{
"categoryName": "Layouts",
"snippets": [
{
"title": "Grid layout",
"description": "Equal sized items in a responsive grid",
"code": [
".grid-container {",
" display: grid",
" grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));",
"/* Explanation:",
"- `auto-fit`: Automatically fits as many columns as possible within the container.",
"- `minmax(250px, 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space).",
"*/",
"}",
""
],
"tags": ["css", "layout", "grid"],
"author": "xshubhamg"
},
{
"title": "Sticky Footer",
"description": "Ensures the footer always stays at the bottom of the page.",
"code": [
"body {",
" display: flex;",
" flex-direction: column;",
" min-height: 100vh;",
"}",
"",
"footer {",
" margin-top: auto;",
"}"
],
"tags": ["css", "layout", "footer", "sticky"],
"author": "dostonnabotov"
},
{
"title": "Equal-Width Columns",
"description": "Creates columns with equal widths using flexbox.",
"code": [
".columns {",
" display: flex;",
" justify-content: space-between;",
"}",
"",
".column {",
" flex: 1;",
" margin: 0 10px;",
"}"
],
"tags": ["css", "flexbox", "columns", "layout"],
"author": "dostonnabotov"
},
{
"title": "CSS Reset",
"description": "Resets some default browser styles, ensuring consistency across browsers.",
"code": [
"* {",
" margin: 0;",
" padding: 0;",
" box-sizing: border-box",
"}"
],
"tags": ["css", "reset", "browser", "layout"],
"author": "AmeerMoustafa"
},
{
"title": "Responsive Design",
"description": "The different responsive breakpoints.",
"code": [
"/* Phone */",
".element {",
" margin: 0 10%",
"}",
"",
"/* Tablet */",
"@media (min-width: 640px) {",
" .element {",
" margin: 0 20%",
" }",
"}",
"",
"/* Desktop base */",
"@media (min-width: 768px) {",
" .element {",
" margin: 0 30%",
" }",
"}",
"",
"/* Desktop large */",
"@media (min-width: 1024px) {",
" .element {",
" margin: 0 40%",
" }",
"}",
"",
"/* Desktop extra large */",
"@media (min-width: 1280px) {",
" .element {",
" margin: 0 60%",
" }",
"}",
"",
"/* Desktop bige */",
"@media (min-width: 1536px) {",
" .element {",
" margin: 0 80%",
" }",
"}"
],
"tags": ["css", "responsive"],
"author": "kruimol"
}
]
},
{
"categoryName": "Buttons",
"snippets": [
{
"title": "Button Hover Effect",
"description": "Creates a hover effect with a color transition.",
"code": [
".button {",
" background-color: #007bff;",
" color: white;",
" padding: 10px 20px;",
" border: none;",
" border-radius: 5px;",
" cursor: pointer;",
" transition: background-color 0.3s ease;",
"}",
"",
".button:hover {",
" background-color: #0056b3;",
"}"
],
"tags": ["css", "button", "hover", "transition"],
"author": "dostonnabotov"
},
{
"title": "3D Button Effect",
"description": "Adds a 3D effect to a button when clicked.",
"code": [
".button {",
" background-color: #28a745;",
" color: white;",
" padding: 10px 20px;",
" border: none;",
" border-radius: 5px;",
" box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);",
" transition: transform 0.1s;",
"}",
"",
".button:active {",
" transform: translateY(2px);",
" box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);",
"}"
],
"tags": ["css", "button", "3D", "effect"],
"author": "dostonnabotov"
},
{
"title": "MacOS Button",
"description": "A macOS-like button style, with hover and shading effects.",
"code": [
".button {",
" font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;",
" background: #0a85ff;",
" color: #fff;",
" padding: 8px 12px;",
" border: none;",
" margin: 4px;",
" border-radius: 10px;",
" cursor: pointer;",
" box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/",
" font-size: 14px;",
" display: flex;",
" align-items: center;",
" justify-content: center;",
" text-decoration: none;",
" transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);",
"}",
".button:hover {",
" background: #0974ee;",
" color: #fff",
"}"
],
"tags": ["css", "button", "macos", "hover", "transition"],
"author": "e3nviction"
}
]
},
{
"categoryName": "Effects",
"snippets": [
{
"title": "Blur Background",
"description": "Applies a blur effect to the background of an element.",
"code": [
".blur-background {",
" backdrop-filter: blur(10px);",
" background: rgba(255, 255, 255, 0.5);",
"}"
],
"tags": ["css", "blur", "background", "effects"],
"author": "dostonnabotov"
},
{
"title": "Hover Glow Effect",
"description": "Adds a glowing effect on hover.",
"code": [
".glow {",
" background-color: #f39c12;",
" padding: 10px 20px;",
" border-radius: 5px;",
" transition: box-shadow 0.3s ease;",
"}",
"",
".glow:hover {",
" box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);",
"}"
],
"tags": ["css", "hover", "glow", "effects"],
"author": "dostonnabotov"
},
{
"title": "Hover to Reveal Color",
"description": "A card with an image that transitions from grayscale to full color on hover.",
"code": [
".card {",
" height: 300px;",
" width: 200px;",
" border-radius: 5px;",
" overflow: hidden;",
"}",
"",
".card img{",
" height: 100%;",
" width: 100%;",
" object-fit: cover;",
" filter: grayscale(100%);",
" transition: all 0.3s;",
" transition-duration: 200ms;",
" cursor: pointer;",
"}",
"",
".card:hover img {",
" filter: grayscale(0%);",
" scale: 1.05;",
"} "
],
"tags": ["css", "hover", "image", "effects"],
"author": "Haider-Mukhtar"
}
]
}
]
68 changes: 68 additions & 0 deletions snippets/css/buttons/switch-button.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: Switch Button
description: A switch button with a beautiful style and effect.
author: Haider-Mukhtar
tags: button,switch,toggle,slider
---

```css
/* The switch - the box around the slider */
.switch {
font-size: 17px;
position: relative;
display: inline-block;
width: 3.5em;
height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #d4acfb;
border-radius: 50px;
transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.slider:before {
position: absolute;
content: "";
height: 1.4em;
width: 1.4em;
left: 0.3em;
bottom: 0.3em;
background-color: white;
border-radius: 50px;
box-shadow: 0 0px 20px rgba(0,0,0,0.4);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.switch input:checked + .slider {
background: #b84fce;
}

.switch input:focus + .slider {
box-shadow: 0 0 1px #b84fce;
}

.switch input:checked + .slider:before {
transform: translateX(1.6em);
width: 2em;
height: 2em;
bottom: 0;
}

/* HTML */
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
```
Loading

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /