Html disappearing in visual editor after saving the page

Hello, I am trying to edit the home page under appearance -> home page. I created a css class for a button and added it to the custom CSS under appearance -> Custom CSS and when I add the html markup in the text editor of the page inside the visual editor field and save the page the html code disappears and that portion of the button doesn’t work. is there a way to make it stay? below is the css and the html code i am using

css

.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#12809b;
  width:250px;
  height: 250px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover{
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 250px rgba(0,0,0,.5);
      
}
span{
  display: none;
 
}
.circle:hover span{
   
    display:block;
}

html

 <div class="circle"><span>Learn More</span></div>

the css portion works fine however the html part doesn’t and I need that to display text on a button when it is hovered

thank you

URL: http://funnelgurus.com