@charset "UTF-8"; body { background: #FFF; } .logo { max-width: 350px; height: auto; } .headline { font-family: source-sans-pro, sans-serif; font-size: 24px; align-content: center; text-align: center; } .email { font-size: 24px; } .bodytext { text-align: left; font-size: 18px; color: black; } .center-container { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering (optional, for full page) */ width: 100%; /* make sure it takes full width */ } .center { text-align: center; } .formatT { font-family: source-sans-pro, sans-serif; } .buttonX { font-family: source-sans-pro, sans-serif; display: flex; /* <-- changed from inline-block to flex */ align-items: center; /* vertically center */ justify-content: center; /* horizontally center */ width: 350px; height: 75px; min-width: 350px; min-height: 75px; max-width: 350px; max-height: 75px; margin: 15px; background-image: linear-gradient(144deg,#005, #042 50%,#000); background-size: 100% 130%; border: 0; border-radius: 8px; box-shadow: rgba(0, 0, 0, .2) 0 15px 30px -5px; box-sizing: border-box; line-height: 1em; max-width: 100%; min-width: 140px; padding: 3px; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; font-size: 26px; color: chartreuse; } .socialicon { max-width: 50px; height: auto; } .buttonX:active, .buttonX:hover { outline: 2px; } .buttonX:hover { padding: 16px 24px; border-radius: 10px; width: 390px; height: 90px; transition: 300ms; background-size: 100% 110%; }