CSS and HTML to create buttons with raising and falling edge symbols

raising_and_falling_edge_buttons.html

<style>
button u, button p { display: inline-block; margin: 0;
    height: 2.4ex; width: 1ex; border-style: solid; }
button u:first-child { border-width: 0 1px 2px 0; }
button p:last-child { border-width: 2px 0 0 1px; }
button p:first-child { border-width: 2px 1px 0 0; }
button u:last-child { border-width: 0 0 2px 1px; }
</style>

<button><u></u><p></p></button>
<button><p></p><u></u></button>

See how it looks in the browser