Creating a button type = send appearance and wrap it like an anchor

Question

I have a submit button in the form that I would like to create and act like an anchor. I tried to do this in css, but you can see in my jsfiddle example, the button text is sitting in its line. I can use the anchor, but want, if possible, to avoid extra js.

HTML:

<span>blah </span> <button type="submit">blaajsdkla blaajsdklajsdkla bla ajsdklajsdkla blaajsdkla sdlaskjdas djakldaldasdjaskj aj as blaajsdkla blaajsdkla sdlaskjdas djakldaldasdjaskj aj as</button> <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span>

CSS

button{
    border: none;
    white-space: normal;
    display:inline-block;
    font: inherit;
    margin: 0;
    padding: 0;
    outline: none;
    outline-offset: 0;
    color: blue;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    background:transparent;
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height:normal;
}

jsfiddle code https://jsfiddle.net/zapjelly/30ta6ofm/4/

Currently looks and how it should look like

Answer 1

Cannot display the button as an inline element. cm.

https://www.w3.org/TR/html5/rendering.html#the-button-element-0

Answer 2

, , display:none. , , for submit. . FIDDLE

SNIPPET

* {
  margin: 0;
  padding: 0;
}
#dual {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  max-width: 97vw;
  border: none;
  max-height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%)repeat;
}
#dual * {
  border: none;
  display: table-row;
  font: inherit;
  outline: none;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  line-height: 1;
  font-variant: small-caps;
  letter-spacing: .3px;
  word-spacing: 2px;
  white-space: pre-line;
}
#sub1 {
  display: none;
}
label {
  text-align: justify;
  text-decoration: underline;
  color: #923;
  box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.7);
}

<form id='dual' name='dual'>
  <label for='sub1'>
    <input id='sub1' type='submit' value=''>Blaajsdkla blaajsdklajsdkla blaajsdklajsdkla blaajsdkla sdlaskjdas Djakldaldasdjaskj Aj as blaajsdkla bBaajsdkla Ssdlaskjdas djakldaldasdjaskj aJ as Blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah</label>
</form>

Hide result