CSS CSS Selectors Selectors - Beyond the Basics DRY CSS

Andrew Sieg
Andrew Sieg
Full Stack JavaScript Techdegree Student 9,469 Points

I can't figure out why the buttons won't change colors.

I cant figure out why the buttons won't change background colors. Any help is appreciated.

/* Attribute Selectors ------------- */


.form-contact {
  padding: 20px 24px;
  background: #f4f7f8;
}

#container {
  max-width: 500px;
  margin: auto;
}

input[type="email"] {
  background: #fdfee6;
}

}

a[target="_blank"]{
  color: #39add1;
  text-decoration: none;
  border-bottom: 1px dotted;
}

/* DRY Classes ------------- */

  .br {
  border-radius: .5em;
}

.avatar {
  display: block;
  margin: 0 auto 2em;
}

.rounded {
  border-radius: 50%;
}

.btn {
  cursor: pointer;
  font-size: .875em;
  font-weight: 400;
  color: #fff;
  padding-left: 20px;
  padding-right: 20px;
  text-transform: uppercase;
}

.btn: hover {
  opacity: .75;

.default {
    background-color: #52bab3;
  }

.error {
  background-color: #ff784f;
  }
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/base-style.css">
  <link rel="stylesheet" href="css/selectors.css">
</head>
<body>
    <div id="container">
        <form class="form-contact br">
        <h1>Contact</h1>

          <label for="name">Name:</label> 
          <input type="text" id="name">

        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="email@website.com">

        <label for="msg">Message:</label>
        <textarea id="msg" rows="7"></textarea>

          <input class="btn default" type="submit" value="Submit">
          <input class="btn error" type="reset" value="Reset"> 
        </form>

        <hr>
        <img class="avatar rounded" src="img/avatar.png" alt="Mountains">

        <form class="form-login">
            <label for="username">Username:</label> 
            <input type="text" id="username">

            <label for="password">Password:</label>
            <input type="password" id="password">

            <input class="btn default" type="submit" value="Login">
      <a href="#" target="_blank">Forgot your password?</a> 
        </form>
    </div>
</body>
</html>

2 Answers

Joey Bruijns
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joey Bruijns
Full Stack JavaScript Techdegree Graduate 47,866 Points

Hi Andrew,

I think it's because of a small mistake in your :hover rule. Your code should work if you delete the space between .btn and :hover, and add a } to end the rule;

.btn:hover {
   opacity: .75;
}