#area{ position: absolute; text-align: center; width: 300px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; user-select: none; font-family: Arial, Helvetica, sans-serif; } input{ background-color: rgba(255, 255, 255, 0.5); border-radius: 5px; border-top: none; border-left: none; border-right: none; outline: none; border-bottom: 1px solid grey; height: 32px; width: 300px; box-shadow: 0px 0px 0px #424242; transition: 0.3s; backdrop-filter: blur(20px); } input:focus{ background-color: rgb(234, 241, 254); box-shadow: 0px 0px 10px #424242; } input:hover{ box-shadow: 0px 0px 10px #424242; } label { display:table-cell; vertical-align: middle; border: 1px solid rgba(35, 34, 34, 0.6); width: 300px; height: 32px; line-height: 30px; text-align: center; font-family: Arial, Helvetica, sans-serif; box-shadow: 0px 0px 0px rgba(69, 67, 67, 0.6); transition: 0.3s; cursor: hand; } label:hover { box-shadow: 0px 0px 10px #424242; } button{ height: 32px; width: 300px; border: solid white 0px; background: linear-gradient(to right, rgb(26, 117, 172), rgb(26, 158, 144)); color: white; cursor: hand; box-shadow: 0px 0px 0px #424242; transition: 0.3s; border-radius: 5px; } button:hover { box-shadow: 0px 0px 10px #424242; } p{ font-family: Arial, Helvetica, sans-serif; }