#a1 {
  width:30%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;    
}

 #a1:hover {
  width:60%;
  background-color:red;
}

 #a2 {
  width:30%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;   
  transition-duration:4s;   
}

 #a2:hover {
  width:60%;
  background-color:red;  
   }

 #a3 {
  position:relative; 
  background-color:red; 
  font-size:0.8em;
  border:3px solid #000; 
  transition-duration:5s; 
  transition-timing-function:cubic-bezier(.17,1.55,.86,-0.95); 
  width:80px;
  height:80px;  
}

#a3:hover {
	 background-color:blue;
	 width:180px;
     height:180px;  
   }

 #a4 {
  position:relative; 
  background-color:red; 
  font-size:0.8em;
  border:3px solid #000; 
  transition-duration:4s;  
  transition-timing-function:steps(10);
  width:80px;
  height:80px;  
}

#a4:hover {
	 background-color:blue;
	 width:180px;
     height:180px;  
   }

.b1{
 
  box-shadow: 1px 1px 1px rgb(120,120,120); 
 transition-duration:1s;
 transition-property:color;
}

.b1:hover{
	 background-color:white;	 
	  color:rgb(138, 192, 7);
     box-shadow: 0px 3px 10px rgb(170,170,170);  	 
}

 .menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}
 

.menuButton:hover {
  position: relative;  
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}