JSFiddle - React, Tailwind, and code Playground

by ritcheyer

HTML

<input type="submit" class="button" name="submit" value="submit" />

CSS

// -----------------------------------------------------------------------------
      // Found this solution here
      // http://bit.ly/czpYAv

      // for some reason, IE (8 specifically) will show whatever  text you have set in
      // your default value even if you use the text-indent: -999px; method of hiding 
      // that default value. One person's solution was to add color: transparent; This 
      // only works though if you add text-transform: capitalize; to your code as well.

      // Anyone know why?
      // -----------------------------------------------------------------------------
      input.button {
	background: url('http://static-cdn-1.tp-global.net/image/tp/css/btns/sign-in.png') no-repeat center center;
	width: 264px;
	height: 30px;
	border: 0;
	cursor: pointer;
	margin: 20px auto 0;
	display: block;
	width: 100%;

        // -- to hide button text in IE
	color: transparent;
	text-transform: capitalize;

        // -- to hide button text in good browsers
	overflow: hidden;
	text-indent: -999px;
}