Just click the button and you'll understand my problem.

Question

So I have this button. I want it to shrink after it's clicked. I need it to only show the left border, but if that's impossible, just hide it completely. I have most of the code done, but there's always a little bit of the button left. Anyone know how to fix this?
https://code.sololearn.com/WpqHOZGBGsuM/?ref=app

Answer 1

Try to add
padding:0;

Answer 2

Thank you guys. I read online that adding padding would cause the same effect. I guess they were wrong.

Answer 3

1st method (opacity)
#ButtonOne {
width:3cm;
height:25px;
font-size:auto;
border:none;
background-color:#25ba2f;
border-left:4px solid #0fe21d;
cursor:pointer;
transition:width 2s, background 2s, opacity 2s;
overflow:hidden;
opacity: 1;
}

#ButtonOne:hover {
background-color:#1e9e26;
}

#ButtonOne:disabled {
background-color:grey;
border-left:4px solid red;
color:red;
cursor:default;
width:1px;
opacity: 0;
transition-delay: 2s;
}
2nd method JS(only border visible)
function Events() {
var b = document.getElementById("ButtonOne");
b.addEventListener("click", Disable);
}

function Disable() {
document.getElementById("ButtonOne").setAttribute("disabled", "");
document.getElementById("ButtonOne").innerHTML = "Disabled";
setTimeout(function(){
document.getElementById("ButtonOne").style="background: white; color:white;"
},3500); document.getElementById("Output").innerHTML = "Hello world!";
}

window.onload = Event

Answer 4

is opacity not affected by transition-delay?

Answer 5

And I actually wanted to avoid using opacity. If possible, I want it to shrink until only the left border is visible.

Answer 6

yeah, i updated my answer if you want to use delay on opacity too
and 2nd ans using JS

Answer 7

Calvin answer is correct.
i didn't realize that there's default padding on the button.
I think thats because i reset elements before doing any styling.