html - How do I show a BUTTON border outside of it's parent DIV area? -

i tried using box-shadow instead, want know if there's easy, efficient way around this.

css

div { text-align: left; background: #f5f5f5; width: 500px; padding: 10px 10px 0 10px; margin: 10px; } button { border: 0; border-bottom: 5px 0 0 #f00; background: #f5f5f5; width: 100px; padding: 10px 0; } 

html

<div> <button>test_1</button> </div> 

if goal button 5px lower parent div, can add css:

button {   transform: translatey(5px); } 

fiddle