It will have to be a formula rich text button to achieve that. Lots of ways to do it, but here is one way:
var text URL = Put your URL here;
var text ButtonWords = "Put your Buttons Words Here";
var text STYLE =
"text-decoration:none;" &
"background: #0a0ef5;" &
"border-radius: 2px;" &
"color: #ffffff;" &
"display: inline-block;" &
"width: 150px;" &
"padding: 6px 16px;" &
"text-align: center;" &
"text-shadow: none;" &
"border: 0px solid #1ba802;" &
"font-size: 12px;";
"<a title='This text will show when hovering over button' style='" & $STYLE & "' href='"
& $URL
& "'>" & $ButtonWords & "</a>"
In your case, you would make an if statement for your buttons words (If(some condition, "Clock In","Clock Out"). Also, would make two style variables ($ClockInStyle and $ClockOutStyle, then maybe a 3rd style variable $FinalStyle = Same If condition for words. Use that Final Style in the button code