index.html

<!DOCTYPE html>
<html>
<head>
  <title>버튼 디자인</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <div class="login-form">
    <form>
      <input type="text" name="email" class="text-field" placeholder="아이디"><br>
      <input type="password" name="password" class="text-field" placeholder="비밀번호"><br>
      <input type="submit" value="로그인" class="submit-btn">
    </form>

    <div class="links">
      <a href="#">비밀번호를 잊어버리셨나요?</a>
    </div>
  </div>
</body>
</html>

css/styles.css

* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

body {
  margin: 0;
  background-color: #1BBC9B;
}

.login-form {
    background-color: #EEEFF1;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    width: 300px;
    padding: 20px; 20px; 20px; 20px;
    margin-bottom: 10px;
    
    
}

.text-field {
  font-size: 14px;
  border: none;
  width: 260px;
  margin-bottom: 10px;
  padding: 10px; 10px; 10px; 10px;
  border-radius: 5px;
  
}

.submit-btn {
  font-size: 14px;
  background-color: #1BBC9B;
  text-align: center;
  width: 260px;
  padding: 10px; 10px; 10px; 10px; 
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
}

.links {
    margin-top: 30px;
}

.links a {
  font-size: 12px;
  color: #9B9B9B;
  text-align: center;
}

hover를 어떤식으로 적용해야될까요? 위에예시에서는

h1: hover {

color:green;

}

이런식으로 배웠는데. 이번엔 클래스에 저장하는거라서. 적용을 어떻게해야할지알려주세요. 가르쳐주실떄 적절한 예시가 부족했다생각합니다 ㅠㅠ

.submit-btn: hover {

box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);

}

이런식으로가야하나요?