Color button selector

HTML

<div id="colorSelection">
  <div class="base_color selector">
    <p class="sectionHeader">Base Color</p>
    <ul class="swatchSelector">
      <hr class="crossbar" width="90%">
      <li class="swatch one"></li>
      <li class="swatch two"></li>
      <li class="swatch three"></li>
      <li class="swatch four"></li>
      <li class="swatch five"></li>
      <li class="swatch six"></li>
      <li class="swatch seven"></li>
      <li class="swatch eight"></li>
    </ul>
  </div>
</div>

CSS

/*reset*/
html, body, ul, li, p, a, img, hr{
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style-type: none;
  text-decoration: none;
}
#colorSelection {
	width: 320px;
	height: 720px;
	background-color:#d4d4d4;
	display: inline-block;
}
.selector{
	margin-bottom: 20px;
	padding: 10px;
	margin-left: 4px;
}
.sectionHeader {
	font-family: helvetica,arial,sans-serif;
	font-size: 20px;
	color:black;
	margin-bottom: 7px;
}
.swatch {
	width: 17px;
	height: 17px;
	border: 2px solid;
	border-radius: 50%;
	display: inline-block;
	margin-left: 12px;
	text-align: center;
	position: relative;
	transition: transform:2s ease-in-out;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
	cursor: pointer;
}
.swatch:hover{
	transform: scale(1.3);
}

.crossbar{
	border:1px white solid; 
	position: relative;
	right: 0px;
	top: 12px;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.25);  
}

.one{
	margin-left: 0px;
	background-color:#ffdc01;
	border-color:white;
	transition: border .01s;
}
.one:hover, .one:active {
	border-color:#ffdc01;
}
.two{
	background-color:#f27245;
	border-color:white;
	transition: border .01s;
}
.two:hover, .two:active {
	border-color:#f27245;
}
.three {
	background-color:#db3844;
	border-color:white;
	transition: border .01s;
}
.three:hover, .three:active {
	border-color:#db3844;
}
.four {
	background-color:#754c90;
	border-color:white;
	transition: border .01s;
}
.four:hover, .four:active {
	border-color:#754c90;
}
.five{
	background-color:#005c9f;
	border-color:white;
	transition: border .01s;
}
.five:hover, .five:active {
	border-color:#005c9f;
}
.six{
	background-color:#343333;
	border-color:white;
	transition: border .01s;
}
.six:hover, .six:active {
	border-color:#343333;
}
.seven {
	background-color:#6a6c70;
	border-color:white;
	transition: border .01s;
}
.seven:hover, .seven:active {
	border-color:#6a6c70;
}
.eight {
	background-color:#e9eae8;
	border-color:white;
	transition: border .01s;
}

.eight:hover, .eight:active {
	border-color:#e9eae8;
}