Anki 2 cards with hidden transliterations on the front

1_front.html

<div class="signes">{{Signes H}}</div>

<input type="button" value="Translittération" onclick="document.getElementById('transliteration').className += ' shown'; this.style.display = 'none'; return false;">

<div id="transliteration" class="transliteration">{{Translittération}}</div>

2_style.css

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: #ddf;
}
input[type="button"] {
  font-size: 16px;
  margin-top: 4px;
}
.transliteration {
  font-size: 30px;
  font-family: Gardiner;
  display: none;
}
.transliteration.shown {
  display: block;
}
.notes {
  margin-top: 15px;
  font-size: 15px;
  color: #777;
}

3_back.html

<div class="signes">{{Signes H}}</div>

<div class="transliteration shown">{{Translittération}}</div>

<hr id=answer>

{{Traduction}}{{#Notes H}}
<div class="notes">
{{Notes H}}
</div>{{/Notes H}}

4_note.md

The "Signes H" and "Notes H" fields are actually created by passing two fields called "Signes" and "Notes" through a custom Anki 2 plugin that calls out to HieroTeX.

Here's an example of what it looks like in action: