Auto activate outline on button when form is open-CodePudding

This image shown the modal when it's open, and I would like to make either my offline or online button have an outline as shown in image 2 according to the current status.

I want this kind of outline but not just when click on

I have tried to use focus but nothing happen so I'm not sure if there are any jquery or html method to help with this? I'm still kind of new to the language

<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5  id="exampleModalLabel">Edit Context</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
         <div >
                <label>Name</label>
                <input type="text" id="Name" name="codename"  disabled value="">
              </div>  
              <div >
                <label> Display Name</label>
                <input type="text" id="DN" name="displayname" >
              </div>
              <div >
                <label>Status</label>  

                <input type="button"  id="Geton"  value="Online"   >
                
                <input type="button"  id="Getoff" value = "Offline"  >


               
              </div>

      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button" id="Save" >Save changes</button>
      </div>
    </div>
  </div>
</div>

this is my html part for the modal I'm using , as for style I'm using bootstrap classes.

currently I'm trying to add css according to value I got when page is load as show in code below anyone got a better ideas?

if(stat == 'online'){
        alert(stat)
        createModal.find("#Geton").css("outline", "3px solid")

    }

CodePudding user response：

To add this effect you shouldn't use border or outline. Just use box-shadow. (this box-shadow is from bootstrap.)

button
{
  background-color : #fff;
  padding : 10px;
  border-radius : 10px;
  color : #198754;
  border : 1px solid #198754;
  transition : 0.2s ease;
  cursor:pointer;
  box-shadow : 0 0 0 0.25rem rgba(25,135,84,0.5);
}
button:focus
{
    color : #fff;
    background-color : #198754;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <button>Online</button>
</body>
</html>