Create a clickable button (div) in Home Editor module

[CrossY]

Hi there,

 

I'm trying to create a simple CSS styled button in the Homepage Editor module (editorial). However, applying certain HTML in the text editor (HTML editor) in the backoffice seems to "clean up" some of the HTML, which then breaks/removes my link.

 

For examle it seems to remove a <a href> which wraps a DIV. Also trying to apply this solution: http://stackoverflow.com/questions/796087/make-a-div-into-a-link -- to create a clickable DIV doesn't work because it simply removes the empty <span></span> tags.

 

Any suggestions how to work around this?

 

Currently using this code:

.seven {
	display: block;
  text-align: center;
  position:relative;
}

.seven em {
 	font-size: 2.2em; 
  vertical-align:middle;
  margin-right: 20px;
}

  .seven h5 {
	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e76974), color-stop(1, #bf3639) );
	background:-moz-linear-gradient( center top, #e76974 5%, #bf3639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e76974', endColorstr='#bf3639');
	border:1px solid #d02718;
	display:inline-block;
  background-color:#f24537;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
	text-indent:0;
	color:#ffffff;
	text-shadow:1px 0px 5px #810e05;
  font-weight: 600; 
  font-size: 2em;

}
.seven h5:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bf3639), color-stop(1, #e76974) );
	background:-moz-linear-gradient( center top, #bf3639 5%, #e76974 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf3639', endColorstr='#e76974');
	background-color:#c62d1f;
  cursor: pointer;
}.seven h5:active {
	position:relative;
	top:1px;
}

.seven p {
 	font-size: 2.1em; 
}

.seven a {
 	color: white;
  text-decoration: none;
}

<div class="seven">
<h5><em class="fa fa-shopping-cart"></em> <a href="mydomain">To the shop</a></h5>
</div>

Placing the <a href> anywhere else around the DIV seems to remove it entirely.

 

Thanks in advance!