title: WordPress shortcode not working properly
body: <p>At first I thought that the button code itself is wrong, but it works correctly on Codepen. See the differences: </p>
  
  <p>CodePen <a href="http://codepen.io/Bogette/pen/QxdJgP" rel="nofollow noreferrer">http://codepen.io/Bogette/pen/QxdJgP</a></p>
  
  <p>WP <a href="http://testnewbogetterihtnow.000webhostapp.com" rel="nofollow noreferrer">http://testnewbogetterihtnow.000webhostapp.com</a></p>
  
  <p>In Wordpress, the button has a jerky hover animation. Also on hover does not change the color of the text, although it is spelled out. </p>
  
  <p>Your help is needed. The reason? Did I misspell the shortcode? </p>
  
  <p>SHORTCODE:</p>
  
  <pre><code>    function text_button() {
  return '
  &lt;style type="text/css"&gt;
  .button {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    border-radius: 30px;
    background-color: transparent;
    -webkit-transition: all 500ms ease, background-color 500ms ease;
    transition: all 500ms ease, background-color 500ms ease;
  }
  
  .button:hover {
    background-image: -webkit-linear-gradient(270deg, #fff, #fff);
    background-image: linear-gradient(180deg, #fff, #fff);
    -webkit-transform: translate(0px, -10px);
    -ms-transform: translate(0px, -10px);
    transform: translate(0px, -10px);
    color: #000;
  }
  &lt;/style&gt;
  
  &lt;html&gt;
  &lt;title&gt;Spectacular Project&lt;/title&gt;
  &lt;meta content="width=device-width, initial-scale=1"name="viewport"/&gt;
  &lt;meta content="Bogette" name="button"/&gt;
  &lt;link href="https://uploads-ssl.webflow.com/5ad2f0250e93f375ebdb98dc/css/bogdans-spectacular-project-1a670d.webflow.f1a16b2d4.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;WebFont.load({  google: {    families: ["Oswald:200,300,400,500,600,700"]  }});
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&amp;&amp;c instanceof DocumentTouch)&amp;&amp;(n.className+=t+"touch")}(window,document);
  &lt;/script&gt;
  &lt;link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/&gt;
  &lt;link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon"/&gt;
  &lt;/head&gt;
  &lt;body class="body"&gt;
    &lt;a href="#" class="button w-button"&gt;Button Text&lt;/a&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  ';
  }
  add_shortcode('tb', 'text_button');
  </code></pre>