I created a primary and secondary button consisting of a block and a standard text (link) because I wanted to have a gradient border and slightly different gradient fill (and simply did not know how else to create this)! 
I created components out of these primary and secondary buttons and I have a basic css animation. In the builder the buttons look as they should. But in the front end, the block (which I used for the gradient border) and the text (which is the fill) look like separate elements.
What am I missing in regards to the components or how else could I create the buttons with gradient A as a border and gradient B as a fill and use it as a design template with different Button text and links? The component itself works. I can place several instances of the button component with different button text and urls.
Before I converted the buttons to components, they worked in the front end.
See video illustration of my issue:
SEE VIDEO
Link to the style guide subpage
SEE PAGE