Exercise 3-1 – Different Button Style For Hover, Transition, Shadows 
< style >  
 
. requestnow {  
 
background-color :  black ;  
 
color :  white ;  
 
height :   40px ;  
 
width :   110px ;  
 
border :  none ;  
 
margin-left :   5px ;  
 
margin-right :   5px ;  
 
border-radius :   2px ;  
 
cursor :  pointer ;  
 
transition :  opacity  0.15s ;  
 
}  
 
. requestnow : hover {  
 
opacity :   0.8 ;  
 
}  
 
. addtocart {  
 
background-color :   rgb ( 255 , 216 , 20 );  
 
color :  black ;  
 
height :   40px ;  
 
width :   150px ;  
 
border :  none ;  
 
border-radius :   50px ;  
 
margin-left :   5px ;  
 
margin-right :   5px ;  
 
cursor :  pointer ;  
 
transition :  background-color  0.15s ;  
 
}  
 
. addtocart : hover {  
 
background-color :   rgb ( 226 ,   194 ,   35 );  
 
}  
 
. signup {  
 
background-color :   rgb ( 46 , 164 , 79 );  
 
color :  white ;  
 
height :   40px ;  
 
width :   95px ;  
 
border :  none ;  
 
border-radius :   8px ;  
 
margin-left :   5px ;  
 
margin-right :   5px ;  
 
font-weight :  bold ;  
 
font-size :   16px ;  
 
cursor :  pointer ;  
 
transition :  box-shadow  0.15s ;  
 
}  
 
. signup : hover {  
 
box-shadow :   0px   5px   10px   rgba ( 0 ,   0 ,   0 ,   0.15 );  
 
}  
 
. getstarted {  
 
background-color :   rgb ( 121 , 82 , 179 );  
 
color :  white ;  
 
height :   40px ;  
 
width :   110px ;  
 
border :  none ;  
 
border-radius :   4px ;  
 
margin-left :   5px ;  
 
margin-right :   5px ;  
 
font-weight :  bold ;  
 
font-size :   14px ;  
 
cursor :  pointer ;  
 
transition :  background-color  0.15s ;  
 
}  
 
. getstarted : hover {  
 
background-color :   rgb ( 103 ,   68 ,   155 );  
 
}  
 
. download {  
 
background-color :  white ;  
 
color :   rgb ( 108 , 117 , 125 );  
 
height :   40px ;  
 
width :   110px ;  
 
border-style :  solid ;  
 
border-color :   rgb ( 108 , 117 , 125 );  
 
border-radius :   4px ;  
 
margin-left :   5px ;  
 
margin-right :   5px ;  
 
font-weight :  bold ;  
 
font-size :   14px ;  
 
cursor :  pointer ;  
 
transition :   0.15s ;  
 
}  
 
. download : hover {  
 
background-color :   rgb ( 108 , 117 , 125 );  
 
color :  white ;  
 
}  
 
. aocw {  
 
background-color :   rgb ( 10 , 102 , 194 );  
 
color :  white ;  
 
height :   40px ;  
 
width :   250px ;  
 
border :  none ;  
 
border-radius :   50px ;  
 
margin-left :   5px ;  
 
margin-right :   5px ;  
 
font-weight :  bold ;  
 
font-size :   16px ;  
 
cursor :  pointer ;  
 
transition :   0.15s ;  
 
}  
 
. aocw : hover {  
 
background-color :   rgb ( 11 ,   79 ,   146 );  
 
}  
 
. save {  
 
background-color :  white ;  
 
color :   rgb ( 10 , 102 , 194 );  
 
height :   40px ;  
 
width :   80px ;  
 
border-width :   1px ;  
 
border-style :  solid ;  
 
border-color :   rgb ( 10 , 102 , 194 );  
 
border-radius :   50px ;  
 
margin-left :   5px ;  
 
margin-right :   5px ;  
 
font-weight :  bold ;  
 
font-size :   16px ;  
 
margin-top :   10px ;  
 
cursor :  pointer ;  
 
}  
 
. save : hover {  
 
background-color :   rgb ( 174 ,   214 ,   255 );  
 
border-width :   2px ;  
 
}  
 
</ style >  
 
 
 
< button   class = " requestnow " >  
 
Request Now  
 
</ button >  
 
< button   class = " addtocart " >  
 
Add to Cart  
 
</ button >  
 
< button   class = " signup " >  
 
Sign up  
 
</ button >  
 
< button   class = " getstarted " >  
 
Get started  
 
</ button >  
 
< button   class = " download " >  
 
download  
 
</ button >  
 
< button   class = " aocw " >  
 
Apply on company website  
 
</ button >  
 
< button   class = " save " >  
 
Save  
 
</ button >  
 
Exercise 3f – Color Change on Click 
< style >  
 
h1 {  
 
font-weight :   800 ;  
 
}  
 
a {  
 
color :   rgb ( 0 ,   113 ,   133 );  
 
transition :  color  1s ;  
 
}  
 
a : hover {  
 
color :   rgb ( 175 ,   50 ,   50 );  
 
}  
 
h3 {  
 
color :   rgb ( 0 , 118 , 0 );  
 
}  
 
. atc {  
 
background-color :   rgb ( 255 , 216 , 20 );  
 
color :  black ;  
 
width :   150px ;  
 
height :   40px ;  
 
font-size :   18px ;  
 
border :  none ;  
 
border-radius :   50px ;  
 
cursor :  pointer ;  
 
margin-right :   7px ;  
 
}  
 
. atc : active {  
 
opacity :   0.5 ;  
 
}  
 
. Buynow {  
 
background-color :   rgb ( 255 , 164 , 28 );  
 
color :  black ;  
 
width :   150px ;  
 
height :   40px ;  
 
font-size :   18px ;  
 
border :  none ;  
 
border-radius :   50px ;  
 
cursor :  pointer ;  
 
}  
 
. Buynow : active {  
 
opacity :   0.5 ;  
 
}  
 
</ style >  
 
< a   href = "" > Back to Amazon </ a >  
 
< h1 > Nike Black Running Shoes </ h1 >  
 
< h3 > $39 - in stock. </ h3 >  
 
< h4 > Free delivery tomorrow. </ h4 >  
 
< button   class = " atc " > Add to Cart </ button >  
 
< Button   class = " Buynow " > Buy now </ Button >