title: How to customize arrow buttons in Swiper
body: <p>How can I customize the arrow buttons below from <a href="http://idangero.us/swiper/#.WXt1ZXbytFQ" rel="nofollow noreferrer">swipers</a>?</p>
  <pre><code>&lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>I did it crudely but it does not seem to be the right way because I get some margin on the right of the button.</p>
  <pre><code>&lt;div class=&quot;swiper-button-next hide-for-small-only hide-for-medium-only&quot; style=&quot;border: 1px solid red; background-color: yellow; padding: 30px; &gt;&lt;/div&gt;
  </code></pre>
  <p>The entire code:</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-css lang-css prettyprint-override"><code>.swiper-container {
    width: 100%;
    height: 450px;
  }
  
  .swiper-slide {
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  
  .swiper-slide {
    font-size: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .swiper-banner-slide {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
  }
  
  .swiper-slide .title {
    font-family: 'Bellefair', serif;
    font-size: 41px;
    line-height: 40px;
    font-weight: 300;
  }
  
  .swiper-slide .subtitle {
    font-size: 21px;
  }
  
  .swiper-slide .text {
    font-size: 21px;
    letter-spacing: 1px;
  }
  
  .slide-info-container {
    color: #000;
  }
  
  .swiper-block {
    padding: 40px 0 40px;
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    /*padding: 0;*/
  }
  
  .swiper-block .swiper-container {
    width: 100%;
    height: 300px;
    margin: 20px auto;
  }
  
  .swiper-block .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- CDN --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Zurb - CDN --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Swiper - CDN --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;main&gt;
  
    &lt;div class="row" id="banner"&gt;
  
      &lt;!-- Swiper --&gt;
      &lt;div class="swiper-container"&gt;
        &lt;div class="swiper-wrapper"&gt;
  
          &lt;div class="swiper-slide swiper-banner-slide" style="background-image: url('images/1.jpg')"&gt;
  
            &lt;!-- grid container --&gt;
            &lt;div class="grid-container"&gt;
              &lt;div class="grid-x grid-padding-x"&gt;
                &lt;div class="small-12 medium-10 large-8 cell slide-info-container"&gt;
                  &lt;h3 class="title"&gt;Aliquam dictum mattis velit 1&lt;/h3&gt;
                  &lt;div class="text"&gt;
                    &lt;p&gt;Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;a href="#features" class="hollow button button-details"&gt;More Details&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- grid container --&gt;
  
          &lt;/div&gt;
  
          &lt;div class="swiper-slide swiper-banner-slide" style="background-image: url('images/2.jpg')"&gt;
  
            &lt;!-- grid container --&gt;
            &lt;div class="grid-container"&gt;
              &lt;div class="grid-x grid-padding-x"&gt;
                &lt;div class="small-12 medium-10 large-8 cell slide-info-container"&gt;
                  &lt;h3 class="title"&gt;Aliquam dictum mattis velit 2&lt;/h3&gt;
                  &lt;div class="text"&gt;
                    &lt;p&gt;Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;a href="#features" class="hollow button button-details"&gt;More Details&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- grid container --&gt;
  
          &lt;/div&gt;
          &lt;div class="swiper-slide swiper-banner-slide" style="background-image: url('images/3.jpg')"&gt;
  
            &lt;!-- grid container --&gt;
            &lt;div class="grid-container"&gt;
              &lt;div class="grid-x grid-padding-x"&gt;
                &lt;div class="small-12 medium-10 large-8 cell slide-info-container"&gt;
                  &lt;h3 class="title"&gt;Aliquam dictum mattis velit 3&lt;/h3&gt;
                  &lt;div class="text"&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;a href="#features" class="hollow button button-details"&gt;More Details&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- grid container --&gt;
  
          &lt;/div&gt;
          &lt;div class="swiper-slide swiper-banner-slide" style="background-image: url('images/4.jpg')"&gt;
  
            &lt;!-- grid container --&gt;
            &lt;div class="grid-container"&gt;
              &lt;div class="grid-x grid-padding-x"&gt;
                &lt;div class="small-12 medium-10 large-8 cell slide-info-container"&gt;
                  &lt;h3 class="title"&gt;Aliquam dictum mattis velit 4&lt;/h3&gt;
                  &lt;div class="text"&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;a href="#features" class="hollow button button-details"&gt;More Details&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- grid container --&gt;
  
          &lt;/div&gt;
          &lt;div class="swiper-slide swiper-banner-slide" style="background-image: url('images/5.jpg')"&gt;
  
            &lt;!-- grid container --&gt;
            &lt;div class="grid-container"&gt;
              &lt;div class="grid-x grid-padding-x"&gt;
                &lt;div class="small-12 medium-10 large-8 cell slide-info-container"&gt;
                  &lt;h3 class="title"&gt;Aliquam dictum mattis velit 5&lt;/h3&gt;
                  &lt;div class="text"&gt;
                    &lt;p&gt;Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;a href="#features" class="hollow button button-details"&gt;More Details&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- grid container --&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Add Pagination --&gt;
        &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
        &lt;!-- Add Arrows --&gt;
        &lt;div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; &gt;&lt;/div&gt;
          &lt;div class=" swiper-button-prev hide-for-small-only hide-for-medium-only "&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Swiper --&gt;
  
      &lt;/div&gt;
  
      &lt;!-- row block --&gt;
      &lt;div class="row swiper-block "&gt;
  
          &lt;div class="grid-container "&gt;
              &lt;div class="grid-x grid-padding-x "&gt;
  
                  &lt;div class="small-12 cell "&gt;
                      &lt;!-- Swiper --&gt;
                      &lt;div class="swiper-container "&gt;
                          &lt;div class="swiper-wrapper "&gt;
                              &lt;div class="swiper-slide "&gt;Slide 1&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 2&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 3&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 4&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 5&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 6&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 7&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 8&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 9&lt;/div&gt;
                              &lt;div class="swiper-slide "&gt;Slide 10&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- Add Pagination --&gt;
                          &lt;div class="swiper-pagination "&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/main&gt;
  
  &lt;script&gt;
    $(function() {
      $(document).foundation();
  
      var swiper = new Swiper('#banner .swiper-container', {
          pagination: '#banner .swiper-pagination',
          slidesPerView: 1,
          paginationClickable: true,
          centeredSlides: true,
          spaceBetween: 30,
          loop: true,
          keyboardControl: true,
          nextButton: '#banner .swiper-button-next',
          prevButton: '#banner .swiper-button-prev',
      });
  
  
      var swiper2 = new Swiper('.swiper-block .swiper-container', {
          pagination: '.swiper-block .swiper-pagination',
          slidesPerView: 5,
          paginationClickable: true,
          spaceBetween: 30,
          freeMode: true,
          keyboardControl: false,
      });
    });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I don't want the margin.</p>
  <p>Any ideas?</p>
  <p><strong>EDIT:</strong></p>
  <p>How do I change the colour blue on the arrow to <strong>black</strong>?</p>
  <pre><code>.swiper-button-next,
  .swiper-button-prev {
      background-color: white;
      background-color: rgba(255, 255, 255, 0.5);
      right:10px;
      padding: 30px;
      color: #000 !important;
      fill: black !important;
      stroke: black !important;
  }
  </code></pre>
  <p>Does not work of course!</p>