ReActor Дмитрий Вершанский

Приветствую Вас!
Самое простое и надежное, что можете сделать для достижения поставленной задачи:
Использовать тег progress, который доступен в рамках 5-ой спецификации HTML, затем написать простенький скрипт, посредством языка JavaScript, который направлен на show / hide (block / none) этого тега, в связке c событием onload

Вложите button в div, с размерами, большими чем размеры кнопки на столько, на сколько это требуется. Не забудьте прописать для div свойство background: #fff; Это создаст желаемый промежуток и у кнопки в том числе. А с изображением уже было сказано - наличие белых полей у исходника.

Здравствуйте!
Ключевые моменты:

1. Сверстать popup-окно, использовав фиксированное позиционирование (fixed)
2. Задать параметр высоты этого окна (height)
3. Прописать свойство (overfoiw), со значение (auto)
4. Применить так же свойство overscroll-behavior, со значением contain, с целью предотвращения перехвата скроллбара нецелевым элементом.

Используйте абсолютное позиционирование элементов, вне нормального их потока

.container {
    margin-top: 45vh;
}

Значение может быть и не 45, а в интервале 45-48, зависит от величины вашего лого, поэтому подбирайте точечно в Вашем случае

Вспомнил про особенность когда дочерний элемент тянет родительский за собой, при условии что мы его "топим" top, поэтому лучше так:

.container {
    padding-top: 45vh;
}

<input type="password" value="" />

input[type="password"]:hover, input[type="password"]:focus {
   background: #bbb;
}