003 - Hoovers, Transitions, Shadows
<button class="subscribe">
   SUBSCRIBE
</button>

<button class="join">
   JOIN
</button>

<button class="tweet">
   Tweet
</button>

<button class="enter">
  Enter
</button>

<div class="btn">
  <button class="login">
    Login
  </button>

  <button class="signup">
    Sign Up
  </button>
</div>
/*
:hover {
  css declarations ;
}

*/

.subscribe {
      background-color: rgb(200, 0, 0) ;
      color: #fff ;
      border: none;
      height: 36px;
      width: 105px;
      margin: 25px;
      border-radius: 3px;
      cursor: pointer;
      transition: opacity 0.15s ;
     /* transition vai fazer ficar + claro de maneira suave.
     transition: oq quer mudar + quant. de tempo
     se quer transicionar varias coisas no mesmo lugar use a virgula
     exemplo no "JOIN"*/
}

.subscribe:hover {
  opacity: 0.8;
/*Isso vai fazer o botão ficar mais opaco/claro */
}

.subscribe:active {
  opacity: 0.5;
/* vai fazer o botão ficar ainda + opaco/claro quando for clicado*/
}

   .join {
      background-color: #fff;
      border-color: rgb(41, 118, 211);
      border-style: solid ;
      border-width: 1px;
      color: rgb(41, 118, 211);
      height: 36px;
      width: 62px;
      border-radius: 3px;
      cursor: pointer;
      font-weight: bolder;
      margin-right: 25px;
      transition: background-color 0.15s, color 0.15s;
/*melhor forma de usar a ttransi. é no 0.15s*/
     
   }

.join:hover {
  background-color: rgb(41, 118, 211) ;
  color: #fff; 
}

.join:active {
  opacity: 0.7;
}

   .tweet {
      background-color:  rgb(2, 158, 255);
      border: none;
      color: #fff;
      height: 36px;
      width: 62px;
      border-radius: 18px;
      cursor: pointer;
      font-weight: bold;
      font-size: 15px;
      margin-right: 25px;
      transition: box-shadow 0.15s;
   }

.tweet:hover {
   box-shadow: 4px 5px 11px rgba(0, 0, 0, 0.15); /* orizontal, vertical, blur, color*/
}

.enter {
  background-color: rgb(0, 0, 0);
  color: #d0cdcd;
  height: 40px;
  width: 90px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 17px;
  transition: opacity 0.15s;
}

.enter:hover {
  opacity: 0.7;
  color: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
}

.enter:active {
  opacity: 0.5;
  box-shadow: 0.15;
}

.btn {
  display: flex;
  margin: 30px;
  justify-content: space-evenly;
}

.login {
  background-color: #e2dfdf;
  border: none;
  height: 40px;
  width: 90px;
  font-family: sans-serif;
  font-size: 17px;
  font-weight: bolder;
  color: #808080;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.login:hover {
    background-color: rgb(80, 80, 80) ;
    color: #fff; 
}

.login:active {
  opacity: 0.8 ;
}

.signup {
  background-color: #000;
  border: none;
  height: 40px;
  width: 90px;
  font-family: sans-serif;
  font-size: 17px;
  font-weight: bolder;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.15s ;
}

.signup:hover {
     opacity: 0.5 ;
}

.signup:active {
  opacity: 0.8;
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

003 - Hoovers, Transitions, Shadows

  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...