title: Button that moves box with text - JavaScript Jquery
body: <p>I have to make this first button called "натисни" make box "кутийка с текст" move to right by 10px when i click the button. Any suggestions ? </p>
  
  <p>Here is the code.</p>
  
  <p><a href="http://jsfiddle.net/08y7rqf5/" rel="nofollow noreferrer">http://jsfiddle.net/08y7rqf5/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// find elements
  var banner = $("#banner-message")
  var button = $("button")
  
  // handle click and add class
  button.on("click", () =&gt; {
    banner.toggleClass("alt")
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  
  #banner-message {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
  }
  
  button {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  #banner-message.alt {
    background: #0084ff;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }
  
  #banner-message.alt button {
    background: #fff;
    color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
    &lt;script&gt;
      $("button").click(function() {
        $("div").animate({
          left: '250px'
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
   
  &lt;body&gt;
    &lt;!-- задача 1 --&gt;
    &lt;div class="container my-5"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item"&gt;
              &lt;div class="d-inline-block border p-2 bg-primary text-white" data-margin="10"&gt;кутийка с текст&lt;/div&gt;
              &lt;input type="button" class="btn btn-info float-right" value="Натисни"&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>