Cómo imitar botones cuadrados con número y descripción en Wordpress

<ul id="grid-list">
								
													<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/300">
								<span class="offscreen">Route </span>300<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 300" href="/routes/300">Arndale Centre Interchange clockwise &amp; anti-clockwise Suburban...</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/300C">
								<span class="offscreen">Route </span>300C<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 300C" href="/routes/300C">Suburban Connector</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/300G">
								<span class="offscreen">Route </span>300G<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 300G" href="/routes/300G">Suburban Connector</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/300H">
								<span class="offscreen">Route </span>300H<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 300H" href="/routes/300H">Suburban Connector</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/300J">
								<span class="offscreen">Route </span>300J<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 300J" href="/routes/300J">Suburban Connector</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/300M">
								<span class="offscreen">Route </span>300M<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 300M" href="/routes/300M">Suburban Connector</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/300U">
								<span class="offscreen">Route </span>300U<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 300U" href="/routes/300U">Suburban Connector</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/320">
								<span class="offscreen">Route </span>320<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 320" href="/routes/320">Aberfoyle Hub to Marion Centre Interchange</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/333">
								<span class="offscreen">Route </span>333<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 333" href="/routes/333">Outer Harbor to Port Adelaide</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/350">
								<span class="offscreen">Route </span>350<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 350" href="/routes/350">Largs Bay to West Lakes Centre Interchange</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/350P">
								<span class="offscreen">Route </span>350P<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 350P" href="/routes/350P">West Lakes Centre Interchange to Port Adelaide Interchange</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/361">
								<span class="offscreen">Route </span>361<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 361" href="/routes/361">Port Adelaide Interchange to Tea Tree Plaza Interchange</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/371">
								<span class="offscreen">Route </span>371<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 371" href="/routes/371">West Lakes Centre Interchange via Seaton Clockwise loop</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/372">
								<span class="offscreen">Route </span>372<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 372" href="/routes/372">West Lakes Centre Interchange via Seaton Anti-clockwise loop service</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
									<li class="route route-bus">
						                        <h3>
							<a class="route-number" href="/routes/376">
								<span class="offscreen">Route </span>376<span class="offscreen">, </span>
							</a>
						</h3>
                        <span class="route-name">
                            <a title="View route 376" href="/routes/376">West Lakes Centre Interchange to Delfin Island Anti-clockwise loop...</a>
                        </span>
						<div class="route-shadow"></div>
					</li>
											</ul>

#page-content #tabs {
    border-bottom: 1px solid #d8d8d8;
    line-height: 34px;
    margin: 0 15px;
    padding-top: 20px;
}

#page-content #grid-list {
    padding: 18px 14px 20px 29px;
}
#grid-list {
    display: inline-block;
}
ol, ul {
    list-style: outside none none;
}
#grid-list li.route-bus, #grid-list li.route-bus h3, #grid-list li.route-special, #grid-list li.route-special h3 {
    background: #2da955 none repeat scroll 0 0;
}
#grid-list li.route {
    cursor: pointer;
    float: left;
    margin: 0 15px 15px 0;
    min-height: 138px;
    position: relative;
    width: 138px;
}
#grid-list li.route-bus, #grid-list li.route-bus h3, #grid-list li.route-special, #grid-list li.route-special h3 {
    background: #2da955 none repeat scroll 0 0;
}
#grid-list li.route h3 {
    letter-spacing: -4px;
    margin: 10px 10px 6px;
    position: relative;
    word-spacing: -4px;
    z-index: 1000;
}
#grid-list .route-name {
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    display: block;
    min-height: 76px;
    padding: 10px;
    width: 118px;
}
#grid-list .route-shadow {
    background: rgba(0, 0, 0, 0) url("../images/sprite.png") repeat-x scroll center -2897px;
    bottom: -20px;
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 138px;
}