diff --git a/src/index.css b/src/index.css
index 28b49ee..d93aadd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "./lit_navigation_style.css";
 
 div[tabindex] {
   flex: 1;
diff --git a/src/lit_navigation_style.css b/src/lit_navigation_style.css
new file mode 100644
index 0000000..2cacabf
--- /dev/null
+++ b/src/lit_navigation_style.css
@@ -0,0 +1,44 @@
+.litbutton{
+  color: #755d86;
+  text-transform: uppercase;
+}
+
+.litbutton:before {
+  content: "[";
+  margin-right: 10px;
+  display: inline-block;
+  opacity: 0;
+  -webkit-transform: translateX(20px);
+  -moz-transform: translateX(20px);
+  transform: translateX(20px);
+  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
+  transition: transform 0.3s, opacity 0.2s;
+}
+
+.litbutton:after {
+  content: "]";
+  margin-left: 10px;
+  display: inline-block;
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
+  transition: transform 0.3s, opacity 0.2s;
+  -webkit-transform: translateX(-20px);
+  -moz-transform: translateX(-20px);
+  transform: translateX(-20px);
+}
+.litbutton:hover{
+  color: #3a97a3;
+}
+.litbutton-active{
+  color: #3a97a3;
+}
+.litbutton:hover:before,
+.litbutton:hover:after {
+  color: #3a97a3;
+  opacity: 1;
+  -webkit-transform: translateX(0px);
+  -moz-transform: translateX(0px);
+  transform: translateX(0px);
+}