body { 
    background: linear-gradient(to right,#211832,#561530,#000000,#662222,#000);
    color: white;
}

section {
    display: none;
    background:linear-gradient(to right,#1D546C,#043915,#000000,#1D546C,#043915,#7B542F);
    font-family: 'Courier New', Courier, monospace;
    font-size:110%; 
    margin: 5px; /* OUTSIDE */
    padding: 25px; /* INSIDE */
    border-radius: 25px;
    color: #FFE797;
}

section#pgWelcome {
    text-align: center;
}

section#pgWelcome header h1 {
    line-height: 25%;
}

section#pgWelcome footer h4 {
    margin-bottom: 1px;
}

/* Style Lables for equal spacing, via Classes (.) */
.lblInCreate {
    /* background-color: azure; */
    width: 5em;
    float: left;
}

/* Style buttons */
button {
   /* margin-top: 1em;
    margin-left: 14.5em;*/
	
  /* Basic styling */
  background:linear-gradient(to right,#211832,#561530,#000000,#662222,#000);
  color: white; /* White text color */
  padding: 15px 32px; /* Space between text and border */
  text-align: center; /* Center the text */
  text-decoration: none; /* Remove underline (if using <a> tag) */
  display: inline-block; /* Allows padding and margin */
  font-size: 16px; /* Increase font size */
  margin: 4px 2px; /* Space around the button */
  cursor: pointer; /* Change mouse cursor to a pointer on hover */
   border: 2px solid #FF9A00;
  border-radius: 30%; /* Rounded corners */
  transition-duration: 0.4s; /* Smooth transition for hover effects */
}
Button:hover {
  background: #E62727; /* A different color on hover */
   box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

/* Style for when the button is being clicked */
Button:active {
  background-color: #ffbf00; /* A distinct color when active */
}

/* Style for keyboard navigation accessibility */
Button:focus {
  outline: none; /* Remove default outline (optional, but ensure good contrast with box-shadow) */
  box-shadow: 0 0 0 4px #5a01a7; /* Add a custom focus indicator */
}


/* Center footer  */
.h4Center {
    text-align: center;
}
<!-- HTML !-->
<button class="button-27" role="button">Button 27</button>

/* CSS */
.button-27 {
  appearance: none;
  background-color: #000000;
  border: 2px solid #1A1A1A;
  border-radius: 15px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform;
}

.button-27:disabled {
  pointer-events: none;
}

.button-27:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.button-27:active {
  box-shadow: none;
  transform: translateY(0);
}