<input type="file">

:root {
  --primary-color: #34495e;
  --secondary-color: #dce4ec;
}

@import url('https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap');

body{
  font-family: 'Lato', sans-serif;
  margin-top: 30px;
  text-align: center;
}

/* file input styles */
input {
  font-size: 12px;
  border: 1px solid var(--secondary-color);
  padding-right: 20px;
  font-family: 'Lato', sans-serif;
}

input:hover {
 border-color: var(--primary-color); 
}

input[type=file]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: var(--secondary-color);
  padding: 10px 20px;
  color: var(--primary-color);
  cursor: pointer;
  transition: background .2s ease-in-out;
}

input:hover::file-selector-button {
  background: var(--primary-color);
  color: var(--secondary-color);
}