<ul> <!-- list -->
  <li>Pixels4Kids</li> <!-- list item -->
  <li>Design</li>
  <li>Code</li>
  <li>Play</li>
  <li>Learn</li>
</ul>
/* Play With Box Settings */

li {
  width:300px;  /* content width */
  height: auto;  /* content height */  
  margin:10px;  /* space between border and other elements */
  padding:0px;  /* space between content and border */
  border-width:20px;  /* border thickness */
  
  
/* adventurous border properties */
  border-color:#1E9DD5; /* try pink, red, yellow,. . . */
  border-style:solid; /* dashed, dotted, solid */
  border-radius:0px;  /* round corners */

/* adventurous text properties */
  font-size:46px; 
	font-style:normal; /* normal, italic */
  text-align:left; /* left, right, center */
  color:#25A8E0; /* font color: try pink, red, yellow,. . . */
  
  /* other adventurous properties */
  display:inline-block; /* block, inline-blobk */
  background-color:#25A8E0;  /* try pink, red, yellow,. . . */
  
}

li:hover {
  color:black; /* try pink, red, yellow,. . . */
  border-color:white;
  background-color:white;
}

ul {
  padding:10px; /* space between content and border */
  margin:20px;  /* space between border and other elements */
  border-width:20px;  /* border thickness */
  
  border-color:#DA458C; /* try pink, red, yellow,. . . */
  border-style:solid; /* dashed, dotted, solid */
}



/* Other Style Settings */


ul {
  list-style:none;
  text-align:center; /* left, right, center */
}

li {
  cursor:pointer;
 
}


* { /* antimated trantitions for all elements */
  -webkit-transition:0.5s; /* For Safari 3.1 to 6.0 */
  transition:0.5s; 
}

External CSS

  1. http://digitallearning.esc4.net/pixels4kids/codepen/css/basic.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js