diff --git a/projects/random/neon-text/index.html b/projects/random/neon-text/index.html
new file mode 100644
index 0000000..2779fba
--- /dev/null
+++ b/projects/random/neon-text/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+ Neon Button
+
+
+
+
+
+
+
+
+
+ Neon
+
+
+
\ No newline at end of file
diff --git a/projects/random/neon-text/style.css b/projects/random/neon-text/style.css
new file mode 100644
index 0000000..fb981d6
--- /dev/null
+++ b/projects/random/neon-text/style.css
@@ -0,0 +1,170 @@
+:root {
+ --clr-neon: rgb(165, 224, 16);
+ --clr-bg: hsl(323 21% 16%);
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ display: grid;
+ place-items: center;
+ background: var(--clr-bg);
+ font-family: "Balsamiq Sans", cursive;
+ color: var(--clr-neon);
+ padding-right: 10rem;
+}
+
+.neon-button {
+ color: var(--clr-neon);
+ font-size: 4rem;
+ display: inline-block;
+ cursor: pointer;
+ text-decoration: none;
+ /* Using em here to make border responsive to text size */
+ border: var(--clr-neon) 0.125em solid;
+ /* Using em here to make padding responsive to text size */
+ padding: 0.25em 1em;
+ /* Using em here to make border-radius responsive to text size */
+ border-radius: 0.25em;
+
+ /* this starts to give it the glow, you could just go with
+ a shadow that is the same color, but better to mix it a little
+
+ ! NOTE: IF YOU MISS that second % in the hsl it breaks it!!!
+ */
+ text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
+
+ /* following makes the text backlit, better something else
+ note current color isn't needed, it is inherited */
+ /* box-shadow: 0 0 0.5em 0 currentColor; */
+ /* inset adds the shadow to the inside of the element */
+ box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
+
+ position: relative;
+}
+
+.neon-button::before {
+ position: absolute;
+ content: "";
+ pointer-events: none;
+
+ background-color: var(--clr-neon);
+ /* could use following or ...*/
+ /* top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0; */
+ /* use this ... */
+ top: 120%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ /* this shifts the effective camera perspective as if
+ its looking down along
+ translateZ would move it up or down, but isn't needed here -/+
+ scale reduces size */
+ transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
+ /* makes it look more like a light is cast
+ play with the value till you find a look you like */
+ filter: blur(1.5em);
+ /* opacity to adjust intensity, boost opacity to make it glow
+ more on a hover */
+ opacity: 0.7;
+}
+
+.neon-button::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ box-shadow: 0 0 2em 0.5em var(--clr-neon);
+ opacity: 0;
+
+ transition: opacity 100ms linear;
+}
+
+.neon-button:focus::before,
+.neon-button:hover::before {
+ opacity: 1;
+}
+
+.neon-button:hover::after,
+.neon-button:focus::after {
+ opacity: 1;
+}
+
+.neon-button:is(:hover, :focus) {
+ background-color: var(--clr-neon);
+ color: var(--clr-bg);
+ /* could also be unset */
+ text-shadow: none;
+}
+
+/* below was from the original file, I commented it out and typed while watching the video*/
+
+/* .neon-button {
+ font-size: 4rem;
+ display: inline-block;
+ cursor: pointer;
+ text-decoration: none;
+ color: var(--clr-neon);
+ border: var(--clr-neon) 0.125em solid;
+ padding: 0.25em 1em;
+ border-radius: 0.25em;
+ text-shadow: 0 0 0.125em rgba(255, 255, 255, 0.3), 0 0 0.45em currentColor;
+ box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
+ position: relative;
+} */
+
+/* .neon-button::before {
+ pointer-events: none;
+ content: "";
+ position: absolute;
+ background: var(--clr-neon);
+ top: 120%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
+ filter: blur(1em);
+ opacity: 0.7;
+} */
+
+/* .neon-button::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ box-shadow: 0 0 2em 0.5em var(--clr-neon);
+ opacity: 0;
+ background-color: var(--clr-neon);
+ z-index: -1;
+ transition: opacity 100ms linear;
+} */
+
+/* .neon-button:hover,
+.neon-button:focus {
+ color: var(--clr-bg);
+ text-shadow: none;
+} */
+
+/* .neon-button:hover::before,
+.neon-button:focus::before {
+ opacity: 1;
+} */
+/*
+.neon-button:hover::after,
+.neon-button:focus::after {
+ opacity: 1;
+} */