how do I change the colour of the writing of the active toggle

user_14390214 0
Viewed 53

I have a toggle button that shifts left to right depending what you select, I would like to change the colour of the text inside the button to white if that is the active toggle option you have selected so if you toggle the text inside goes white, however I'm not sure how to achieve this any help would be appreciated thank you

<div class="form-box">
        <div class="button-box">
            <div id="btn"></div>
            <button type="button"  class="toggle-btn" onclick="login()">Sign in</button>
            <button type="button" class="toggle-btn" onclick="register()">Register</button>
        </div>



.form-box {
    width: 380px;
    height: 660px;
    position: relative;
    margin: 20% auto;
    padding: 5px;
    overflow: hidden;
    bottom: 150px;
}

.button-box {
    width: 220px;
    left: 100px;
    top: 50px;
    position: relative;
    display: flex;
    box-shadow: 0 0 10px 3px #ff61241f;
    border-radius: 30px;
    
}

.toggle-btn {
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}


#btn {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    width: 110px;
    height: 100%;
    background-color: #fd886b;
    border-radius: 30px;
    transition: .5s;
}
css html
1 Answers

I have removed the login() and register() functions as they don't serve any purpose to this problem. Also only the text color changes and not the background color as it was not asked but the idea is similar.

function fun(x) {
    if(x===1)
  {
    document.getElementById("b1").style.color="white";
    document.getElementById("b2").style.color="black";
  }
  else
  {
    document.getElementById("b2").style.color="white";
    document.getElementById("b1").style.color="black";
  }
}
.form-box {
    width: 380px;
    height: 660px;
    position: relative;
    margin: 20% auto;
    padding: 5px;
    overflow: hidden;
    bottom: 150px;
}

.button-box {
    width: 220px;
    left: 100px;
    top: 50px;
    position: relative;
    display: flex;
    box-shadow: 0 0 10px 3px #ff61241f;
    border-radius: 30px;
    
}

.toggle-btn {
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}


#btn {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    width: 110px;
    height: 100%;
    background-color: #fd886b;
    border-radius: 30px;
    transition: .5s;
}
<div class="form-box">
        <div class="button-box">
            <div id="btn"></div>
            <button id="b1" type="button"  class="toggle-btn" onclick="fun(1)" style="color: white">Sign in</button>
            <button id="b2" type="button" class="toggle-btn" onclick="fun(2)">Register</button>
        </div>
</div>

user_98841760
Related