@sudarshanaui/crazy-back-button 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CrazyBackButton.css +52 -0
- package/CrazyBackButton.jsx +15 -0
- package/README.md +11 -0
- package/index.js +1 -0
- package/package.json +8 -0
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.sd-magnet-core {
|
|
2
|
+
position: relative;
|
|
3
|
+
padding: 32px 40px;
|
|
4
|
+
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/893f4a12-5203-4d80-ba86-411fcd3826d5/dmtgimg-65182de5-799d-46e7-83a2-973f95bc241c.png/v1/fill/w_343,h_175,q_80,strp/screenshot_2026_09_12_163540_by_dhruvadroja1_dmtgimg-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTc1IiwicGF0aCI6Ii9mLzg5M2Y0YTEyLTUyMDMtNGQ4MC1iYTg2LTQxMWZjZDM4MjZkNS9kbXRnaW1nLTY1MTgyZGU1LTc5OWQtNDZlNy04M2EyLTk3M2Y5NWJjMjQxYy5wbmciLCJ3aWR0aCI6Ijw9MzQzIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.5BQRTRV2iwiFiOz7sfkb3E-4i6MaKT2NC8Fut3YYCkw');
|
|
5
|
+
background-size: cover;
|
|
6
|
+
background-position: center;
|
|
7
|
+
background-repeat: no-repeat;
|
|
8
|
+
border-radius: 16px;
|
|
9
|
+
border: none;
|
|
10
|
+
outline: none;
|
|
11
|
+
box-shadow: 0 10px 0 #1a1a1a, 0 16px 24px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.15);
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.2s ease;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.sd-magnet-field {
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: 0;
|
|
20
|
+
left: 0;
|
|
21
|
+
right: 0;
|
|
22
|
+
bottom: 0;
|
|
23
|
+
background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 1px, transparent 3px);
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
z-index: 1;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.sd-magnet-core:hover {
|
|
29
|
+
filter: brightness(1.1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.sd-magnet-core:active {
|
|
33
|
+
transform: translateY(8px);
|
|
34
|
+
box-shadow: 0 2px 0 #1a1a1a, 0 4px 10px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.15);
|
|
35
|
+
filter: brightness(0.9);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sd-magnet-text {
|
|
39
|
+
position: relative;
|
|
40
|
+
z-index: 3;
|
|
41
|
+
font-family: 'Impact', 'Anton', sans-serif;
|
|
42
|
+
font-size: 56px;
|
|
43
|
+
font-weight: 900;
|
|
44
|
+
letter-spacing: 2px;
|
|
45
|
+
text-transform: uppercase;
|
|
46
|
+
background: linear-gradient(180deg, #fff7c0 0%, #fbd13c 45%, #d1950c 100%);
|
|
47
|
+
-webkit-background-clip: text;
|
|
48
|
+
-webkit-text-fill-color: transparent;
|
|
49
|
+
-webkit-text-stroke: 2px #000;
|
|
50
|
+
filter: drop-shadow(1px 2px 0px #000) drop-shadow(2px 4px 0px #000) drop-shadow(3px 6px 0px #000) drop-shadow(4px 8px 0px #000);
|
|
51
|
+
}
|
|
52
|
+
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './CrazyBackButton.css';
|
|
3
|
+
|
|
4
|
+
export const CrazyBackButton = ({ text = "ESC" }) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
|
|
8
|
+
<button className="sd-magnet-core">
|
|
9
|
+
<div className="sd-magnet-field"></div>
|
|
10
|
+
<span className="sd-magnet-text">{text}</span>
|
|
11
|
+
</button>
|
|
12
|
+
|
|
13
|
+
</>
|
|
14
|
+
);
|
|
15
|
+
};
|
package/README.md
ADDED
package/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CrazyBackButton';
|