Konstantin Konstantin - 24 days ago 6
CSS Question

Partially hidden button jumps up when focused in Chrome

I have a form with a submit button positioned absolutely, moved to the bottom-right corner and partially hidden (it looks like quarter-circle on the design). When I place focus on one of the input field and then press TAB to move focus to the button, it jumps up and shifts the entire form content up.

Styles are pretty basic:

<form action="">
<input type="text" width="100px" placeholder="Text input">
<button>Submit</button>
</form>


CSS

form {
height: 500px;
width: 500px;
position: relative;
overflow: hidden;
padding: 20px;
background: #cef;
}

button {
position: absolute;
display: block;
height: 100px;
width: 100px;
right: -50px;
bottom: -50px;
background: yellow;
}


Here's fiddle:
https://jsfiddle.net/4zhL68z0/1/
Chrome version is 54.0.2840.87 (64-bit)

Clipping didn't work, changing placement from bottom: -20px to top: 500px didn't work, so any ideas are welcome.

Answer

Try putting the button in a container and positioning that absolute. Here's a quick fiddle: https://jsfiddle.net/giwan/4zhL68z0/2/

```

.button-container {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  bottom: -50px;
}

button {
  display: inline-block;
  border-radius: 360px;
  border: none;
  width: 100px;
  height: 100px;
  background: yellow;
}

```

Alternatively you could use an image to get the desired effect on the button.