Custom css in icon list

Hey team

I created a button using css. I’d like to place it into an icon list. However, when I place the code:

<a href="#_ATT{Virtual Class}"><button class="registration-button"><span style="color: white;">Register for
Online Class</span></button></a>

inside the icon list, it doesn’t render the css from the button class. When I use the same code elsewhere on the site (outside of icon list elements) it does render correctly.

This is the css I have placed in the Quick CSS.

/* Buttons for registering on events pages*/
.registration-button {
  border:#f70a3d; 
  border-width: .3px;
  border-radius: .225em;
  border:solid; 
  background-color:#bf0a31; 
  width:200px; 
  padding: 0.385em 0.923em 0.538em;
  line-height: normal; 
  margin:8px;
  text-align: center;
  font-size:16px;
  text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
  margin: 0 auto;
  vertical-align: left;
}

.registration-button:hover {
  border:#ebc4b5;
  border-width: .3px;
  border-radius: .225em;
  background-color:#bf0a31;
  opacity: 0.8;
  width:200px; 
  padding: 0.385em 0.923em 0.538em;
  line-height: normal; 
  margin:8px;
  text-align: center;
  font-size:16px;
  text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
  margin: 0 auto;
  vertical-align: left;
}

.registration-button a {
	color:white;	
}

What do I need to do to make this work?