+ 2

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

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

7th Jun 2018, 1:16 AM
Daniel Cooper
Daniel Cooper - avatar
7 odpowiedzi
+ 1
Try to add padding:0;
7th Jun 2018, 2:33 AM
Calviղ
Calviղ - avatar
+ 2
Thank you guys. I read online that adding padding would cause the same effect. I guess they were wrong.
7th Jun 2018, 2:55 AM
Daniel Cooper
Daniel Cooper - avatar
0
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
7th Jun 2018, 2:03 AM
Owenizedd
Owenizedd - avatar
0
is opacity not affected by transition-delay?
7th Jun 2018, 2:18 AM
Daniel Cooper
Daniel Cooper - avatar
0
And I actually wanted to avoid using opacity. If possible, I want it to shrink until only the left border is visible.
7th Jun 2018, 2:22 AM
Daniel Cooper
Daniel Cooper - avatar
0
yeah, i updated my answer if you want to use delay on opacity too and 2nd ans using JS
7th Jun 2018, 2:25 AM
Owenizedd
Owenizedd - avatar
0
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.
7th Jun 2018, 2:44 AM
Owenizedd
Owenizedd - avatar