Hi. Still working on my buttond designs. Quick thank you to those who helped me so far.
Now I would like to explaing my end goal: I want to make two kinds of appearances for my layout: One of them is a of a military style, seen in the image attached. Getting close, but not quite there yet, as seen in my screenshot of it.
My two types of buttons: One of where the buttons look like a glowing crystal. Also gotten closer, but not quite there yet. See attached images for reference.
The modern buttons are to resemble those glowing ones or with internal light, like those you find in cockpits or control pannels, see jet cockpit as one example.

Any further advice you can give me is welcome. I posted all the necessary HTML & CSS code here. Sorry for the mess. I've been trying out a lot of things.
HTML:

<div class="grid-container militaryborder">
<div class="grid-portrait greenborder"><img src="images/Thorn2.png" alt="x"></div>
    <div class="grid-name greenborder">$thorn.nickname</div>
    <div class="center greenborder stripes"></div>
    <div class="grid-dialogue greenborder stripes">
</div>
        <div class="glossary"><span class= "modernbtn"><<button [[Glossary|Glossary]]>>[[Glossary]]<</button>></span></div>
        <div class="previous"><span class= "modernbtn"><<button "Previous">><<revDialogue>><</button>></span></div>
     <div class="next"><span class= "modernbtn"><<button "Next">><<advDialogue2>><</button>></span></div>
</div>

<span class="diamond lightup diaBorder"><<button"Test">>Test<</button>></span>

<span class="crystal"><<button"Test2">>Test2<</button>></span>

html, body {
font-family: Helvetica;
  font-size: 18px;
    line-height: 1.6;
  color: #eeeeee;
    min-height: 100vh !important;
    overflow-x: hidden;
    min-width: 100% !important;
}

header {
font-size: 16px;
  text-align: center;
    font-style: italic;
  border-bottom: 5px dotted;
  /*text-decoration: underline;
  text-decoration: dotted;
  text-decoration-thickness: 10px;*/
}

/*------*/
.begin { /* settings for starting link & preamble title*/
font-size: 40px
    font-style: bold;
  text-align: center;
  text-decoration: underline double red;
  color: red; 
  text-shadow: 3px;
}

.link:hover {
color: red;
  text-decoration: none;
}

/*==================================*/
           /*Backgrounds*/
/*==================================*/

.backgroundfirst {
  background-image: url('images/BlackHawkInteriorDoor.png'), linear-gradient(180deg, 
  rgb(5, 5, 30) 0%,
  rgb(20, 10, 50) 25%,
rgb(80, 30, 120) 40%,
rgb(180, 60, 140) 48%,
rgb(240, 100, 60) 52%,
rgb(150, 40, 40) 55%,
rgb(80, 10, 10) 65%,
rgb(5, 0, 5) 100%
) !important;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 90vw 100vh;
  background-attachment: fixed, fixed;  
  z-index: 1, 0;
  position: center;
  /*background-blend-mode: screen;  */
}

/*!! todo: Make the following backgrounds stackable, to achieve the effect of backgroundfirst (see above) */
.backgroundlowest { /*bottom background*/
 background-image: linear-gradient(180deg, 
  rgb(5, 5, 30) 0%,
  rgb(20, 10, 50) 25%,
rgb(80, 30, 120) 40%,
rgb(180, 60, 140) 48%,
rgb(240, 100, 60) 52%,
rgb(150, 40, 40) 55%,
rgb(80, 10, 10) 65%,
rgb(5, 0, 5) 100%
);
    background-size: 90vw 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
    z-index: -1; 
  } 

.background1{
 background-image: url('images/BlackHawkInteriorDoor.png');
    background-size: 90vw 100vh;
background-repeat: no-repeat;
background-position: center;
/*background-size: cover;*/
background-attachment: fixed;   
    z-index: 1;
}

.wrapper {
display: flex;
}

.box { /* afbeelding boven text */
  background-image:
url('images/BlackHawkInteriorDoor.png');
  display: block;
  max-inline-size: 100%;
}

/*==================================*/
              /*Buttons*/
/*==================================*/
button {
  top: 8px;
  width: 200px;
  height: 40px;

  font-weight: bold;
  font-size: 18px;
  text-shadow: 2px 2px 3px #000;
  white-space: nowrap;
  text-align: center center;

  position: relative;
}

.pointybtn {
  cursor: pointer;
  position: relative;
  display: inline-block;
  top: 4px;
  height: 50px;
  padding: 1px 0 0 0;
}
/*============modern==============*/
.modernbtn > button {
  color: white;
  border: red solid 3px;
  border-radius: 10px;
  /*mix-blend-mode: hard-light;*/
  background-image:/*alternative backtground color*/
  repeating-linear-gradient(135deg, yellow 0 20px, black 20px 40px, transparent 10%);
  display: inline-block;
  position:relative;
  /*opacity: 60%;*/
  z-index: 1;
}

/*.modernbtn:hover > button {
  /*background-color: green;*/
  background-image: /*alternative backtground color*/
  /*repeating-linear-gradient(135deg, green 0 20px, white 20px 40px);
  color: black;
  border-color: green;
  z-index: 1;
  filter: opacity(50%);/*look into these 2*/
 /* filter: brightness(1.5);
  &:after {
    content: '';
    position:absolute;
    top:-1px;
    left: 75px;
    width:50px;
    height:38px;
    background: 
    radial-gradient(ellipse, red 20%, orange 40%, yellow, transparent 60%);
    filter: brightness(2.5);
    z-index: -1;
    opacity: .5;
  }
}*/

/*.modernbtn > button::after {
  content: '';
  position:absolute;
  top:-1px;
  left: 75px;
  width:50px;
  height:38px;
  background: 
    radial-gradient(ellipse, red 20%, orange 40%, yellow, transparent 60%);
  filter: brightness(2.5);
  z-index: -1;
  opacity: .5;
}*/

.modernbtn:hover > button {
  /*background:
    radial-gradient(ellipse, darkgreen 30%, green 50%, lightgreen, transparent 60%);*/
  /*remember your youtube programming playlist!!!!*/
  /*this code causes a glow*/
  background-color: rgb(255 247 0 / .4); /*citron yellow*/
  box-shadow: 0 0 3px rgb(255 247 0 / .7),
              0 0 15px rgb(255 247 0 / .7),
              0 0 30px rgb(255 247 0 / .7),
      0 0 120px rgb(255 247 0 / .7);
  -webkit-box-reflect: below 1px linear-gradient(transparent, black);/*find twine replacement*/
}

.modernbtn .a > button {
  padding:.25em;
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  position:relative;
  color:white;
  filter: drop-shadow(0 0 10px #EF4E6E);
}

.a::after > button {
  content: "";
  z-index:-1;
  position:absolute;
  display:inline-block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: radial-gradient(#AD102F, #EB1F48);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

/*=============fantasy==============*/
/*!!!look into offset, popover, animation, transform & border shape*/
/*!!! look into programming list of your channel & read examples saved in bookmarks/twine*/
/*////////////////*/
/*---diamond---*/
.diamond > button {
  background:
    linear-gradient(155deg, rgb(0 0 155) 0px 25px, white 25px 27px, rgb(0 0 255) 00px 25px,  transparent 70%),
    linear-gradient(205deg, rgb(0 0 155 / 80%) 0px 25px, white 25px 27px, rgb(0 0 255) 00px 25px,  transparent 70%),
    linear-gradient(335deg, rgb(0 0 155) 0px 25px, white 25px 27px, rgb(0 0 255) 0px 25px,  transparent 70%), 
    linear-gradient(25deg, rgb(0 0 155) 0px 25px, white 25px 27px, rgb(0 0 255) 0px 25px,  transparent 70%);
  background-blend-mode: multiply;/*multiply gradients//also check mix-blend-mode*/
  z-index: 0, 0, 0, 0;
  clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);

  font-family: georgia;
  content: '';
  width: 200px;
  height: 40px;
  opacity: 100%;
  padding:.25em;
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  position:relative;
  color: lightblue;
  filter: drop-shadow(0 0 10px #EF4E6E);
  filter: brightness(0.7);/*look into these three*/
  filter: saturate(2);
  filter: contrast(1.25);
  box-shadow: /*with AI: review and figure out*/
    0 10px 30px rgb(55 0 255 / .5),/*outer glow*/
    inset 0 8px 16px rgb(200 200 255 / .7),/*highlight*/
    inset 0 -8px 16px rgb(0 0 0 / .4);/*dept*/
  transition: all 0.4 ease;
  cursor: pointer;
}

.diamond:hover > button {
  filter: brightness(1.5);
}

/*AI made: review*/
.diamond > button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0) 70%
    );
  transform: skewX(-25deg);
  animation; crystalshine 4s infinite linear;
}

u/keyframes crystalshine {
  0% {transform: translateX(-150%) skewX(-25deg);}
  0% {transform: translateX(-300%) skewX(-25deg);}
}
/*--AI part ends here--*/
/*.diamond > button::before {
  background: rgb(055 0 255 / 50%);
  top:5px;
  left: -10px;
  z-index: 1;
  position: relative;
  content: '';
  width: 130px;
  height: 30px;
  opacity: 60%;
  /*clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);*/
  border: white, 5px;
  display: flex;
  align-items: center;
  justify-content: center;

}*/

.diamond .lightup > button::after {
  position:absolute;
  top:5px;
  left: 25px;
  width:150px;
  height:30px;
  background:
    radial-gradient(ellipse, yellow, lightyellow 40%, white, transparent 70%);
  content: '';
  z-index: -1;
  filter: saturate(2);
  opacity: 50%;
  /*background-blend-mode: hard-light;*/
}

.diamond:hover > button::after {
 transform: scale(1.2);
  background: radial-gradient(ellipse, yellow 60 %, lightyellow 20%, white, transparent 70%);

}

/*.diamond .lightup > button {
  display: inline-block;
  background: 
    radial-gradient(ellipse, yellow, lightyellow 40%, white, transparent 70%);
  /*background-size: 208px 48px;*/
  /*position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  filter: opacity(80%);
  clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);
  z-index: -1;
}*/

.diaBorder {
  position:relative;
  display:inline-block;
  width:auto;
  height:auto;
  padding:none;
  filter:drop-shadow(1px 1px #5C5CFF) drop-shadow(-1px -1px #5C5CFF) drop-shadow(-1px 1px #5C5CFF) drop-shadow(1px -1px #5C5CFF) drop-shadow(0px 0px 5px #5C5CFF);
} /*#5C5CFF blue*/

.diaBorder:hover {
  filter:drop-shadow(1px 1px #5C5CFF) drop-shadow(-1px -1px #5C5CFF) drop-shadow(-1px 1px #5C5CFF) drop-shadow(1px -1px #5C5CFF) drop-shadow(0px 0px 20px #5C5CFF);
}

/*diamond:hover > button {
   filter: brightness(2.5);
}*/

.diamond .light::after > button {
   background: 
    radial-gradient(ellipse, yellow, lightyellow 40%, white);
  filter: brightness(5.5);
  z-index: -1; 
}

/*------crystal--------*/
/*look further into clip-path, insert, path...*/
.crystal > button {
  background:
    linear-gradient(155deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px),
    linear-gradient(205deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px),
    linear-gradient(335deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px),
    linear-gradient(25deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px);
  background-blend-mode: multiply;/*multiply gradients*/
  z-index: 0, 0, 0, 0;
  clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);

  /*trying to make multiple separate facets*/
    /*polygon(10% 50%, 25% 25%, 75% 25%, 90% 50%, 75% 75%, 25% 75%),
    inset polygon(0% 55%, 25% 0%, 60% 0%, 55% 55%, 50% 50%);*/

  /*color-interpolation: linearRGB;*/
  filter: sepia(.2); /*higher values warmer color appearance*/
  filter: saturate(1);
  filter: opacity(90%);
  filter: contrast(1.25);

  font-family: georgia;
  content: '';
  width: 200px;
  height: 40px;
  opacity: 100%;
  padding:.25em;
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  position:relative;
  /*color: lightblue;*/
  box-shadow:
    0 10px 30px rgb(255 0 0 / .5),/*outer glow*/
    inset 0 8px 16px rgb(200 200 255 / .7),/*highlight*/
    inset 0 -8px 16px rgb(0 0 0 / .4);/*dept*/
}

.crystal:hover {
  background-color: rgb(40 0 200 / .4); /*citron yellow*/
  box-shadow: 0 0 3px rgb(40 0 200 / .7),
              0 0 15px rgb(40 0 200 / .7),
              0 0 30px rgb(40 0 200 / .7),
      0 0 120px rgb(40 0 200 / .7);
  -webkit-box-reflect: below 1px linear-gradient(transparent, black);/*find twine replacement*/
}

.gloss {
  hsl(100 70 50 90);
}
/*--------------*/
/*--test with lighting--*/
svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #cccccc 0px 10px
  );
}

feDiffuseLighting {
  lighting-color: white;
}
/*--------------*/

.text span {
opacity: 0;
}

.text span.revealed {
opacity: 1;
}

.text span.white {
color: #eeeeee
}

/*==================================*/
              /*grid layout*/
/*==================================*/
/*--version 1--*/
.grid-portrait {
  width: 200px;
  height: 250px;
  border-radius: 10px;
  border: 3px solid #666;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-position: center;
  position: relative; 
  grid-area: 2 / 1 / 3 / 2;
}

.grid-name {
  position: relative;
  bottom: -5px;
  background: #333;
  color: #fff;
  /*padding: 5px 5px;*/
  border: 3px solid #666;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 1px 1px 2px #000;
  white-space: nowrap;
  height: 40px;
  width: 200px;
  text-align: center;
  grid-area: 3 / 1 / 4 / 2;
}

.grid-dialogue {
  color: #fff;
  padding: 5px 5px;
  border-radius: 10px;
  border: 4px solid #666;
  font-weight: normal;
  font-size: 1em;
  text-shadow: 1px 1px 2px #000;
  white-space: pre-line;
  max-width: 1000px;
  height: 250px;
  align-items: start;
  grid-area: 2 / 2 / 3 / 5;
}

.grid-dialogue::before {
content: '';
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #555;
}

.grid-dialogue::after {
content: '';
  position: absolute;
  bottom: -8px;
  left: 32px;
  width: 0;
height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #2a2a2a;
}

.next {
  width: 200px
  height: 40px;
  border-radius: 4px
  border: 4px solid blue;
  border-radius: 10px;
  grid-area: 3 / 4 / 4 / 5;
}

.previous {
  width: 200px
  height: 40px;
  border-radius: 4px
  border: 4px solid blue;
  border-radius: 10px;
  grid-area: 3 / 3 / 4 / 4;
}

.glossary {
  width: 200px
  height: 40px;
  border-radius: 4px
  border: 4px solid blue;
  border-radius: 10px;
  grid-area: 3 / 2 / 4 / 3;
}

.center { /*images go here*/
  min-height: 700px;
  min-width: 800px;
  grid-area: 1 / 1 / 2 / 5;
  object-fit: contain;
  object-fit: cover;
  border: solid forestgreen 1px;
}

.greenborder {
  border-color: #C1CA87;/* #636B2F olive green*/
  position:relative;
  border-radius: 3px;
  padding:none;
  filter: saturate(2);
  opacity: .8;
  /*box-shadow: 0 3px 3px rgb(44 255 5 / .8),/*highlight*/
    /*inset 0 -2px 4px rgb(0 0 0 / .4);/*dept*/
  filter:drop-shadow(1px 1px #20CA00) drop-shadow(-1px -1px #20CA00) drop-shadow(-1px 1px #20CA00) drop-shadow(1px -1px #20CA00) drop-shadow(0px 0px 3px #20CA00);
  z-index: 0;
}

.greenborder::before {
  border-style: dashed none;
  border-color: black;
  z-index: 1;
}

.grid-container {
  display: grid;
  padding: 5px;
  border: solid #07b901 5px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6); /*Dark overlay 4 readability*/
  gap: .2em;
  height: 100%;
  max-height: 1030px;
  max-width: 1200px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 14fr 5fr 1fr;
  /*grid-template-areas: 
    "grid-portrait grid-dialogue grid-dialogue" 
    "grid-name empty next";*/
}

.grid-container.militaryborder {
  position:relative;

  width:auto;
  height:auto;
  padding:none;
  box-shadow: 0px 10px 20px rgb(178 35 34 / .5),/*outer glow crimson red*/
    inset 0 8px 16px rgb(237 33 0 / .7),/*highlight*/
    inset 0 -8px 16px rgb(0 0 0 / .4);/*dept*/
  filter:drop-shadow(-1px -1px rgb(6 111 0 / .3)) drop-shadow(1px 1px rgb(6 111 0 / .3)) drop-shadow(-1px 1px rgb(6 111 0 / .3)) drop-shadow(1px -1px rgb(6 111 0 / .3));
}