/* Use the HTML  to use this.  under How7 folder
<a href="https://www.example.com" class="button-link">Go to Webpage</a>
*/
/*
<!-- Optional CSS to make it look like a real button -->
<style>
  .button-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
  }`
  .button-link:hover {
    background-color: #0056b3;
  }
  */
  
  <style> button, input[type="button"], input[type="submit"] 
 
 
button {
  /* Resets mobile browser styling overrides */
   /* Button style to make mobile browser buttons look 3D
       more like desktop. 
	   Forces mobile browsers to use your custom styling instead of phone defaults */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Button styling */
  background-color: #007bff; /* Vibrant blue background */
  color: #ffffff;            /* White text */
  padding: 12px 24px;        /* Forces thickness and width */
  font-size: 16px;           /* Clean text sizing */
  font-weight: bold;
  border: none;              /* Removes default ugly borders */
  border-radius: 6px;        /* Smooth rounded corners */
  cursor: pointer;           /* Desktop hand cursor */
  display: inline-block;     /* Blocks text from collapsing */
}

/* Adds a hover effect for desktop users */
button:hover {
  background-color: #0056b3;
}