<h1>Gradient Buttons</h1>



<div class="collection collection--list" id="">

  <ul class="collection__items">

    <li class="rounded collection-item collection-item--has-image" id="">
      <div class="collection-item__content">
        <div id="content_" class="collection-item-image image">
          <a href="">
            <img width="" height="" alt="" src="png">
          </a>
        </div>
        <div class="collection-item-label"><a href="">Our products</a></div>
        <div class="collection-item-description">
          <p>Description</p>
        </div>
      </div>
    </li>

    <li class=" square collection-item collection-item--has-image" id="">
      <div class="collection-item__content">
        <div id="content_" class="collection-item-image image">
          <a href="">
            <img width="" height="" alt="" src="png">
          </a>
        </div>
        <div class="collection-item-label"><a href="">Our products</a></div>
        <div class="collection-item-description">
          <p>Description</p>
        </div>
      </div>
    </li>
    <li class="solid collection-item collection-item--has-image" id="">
      <div class="collection-item__content">
        <div id="content_" class="collection-item-image image">
          <a href="">
            <img width="" height="" alt="" src="png">
          </a>
        </div>
        <div class="collection-item-label"><a href="">Our products</a></div>
        <div class="collection-item-description">
          <p>Description</p>
        </div>
      </div>
    </li>
    <li class="color collection-item collection-item--has-image" id="">
      <div class="collection-item__content">
        <div id="content_" class="collection-item-image image">
          <a href="">
            <img width="" height="" alt="" src="png">
          </a>
        </div>
        <div class="collection-item-label"><a href="">Our products</a></div>
        <div class="collection-item-description">
          <p>Description</p>
        </div>
      </div>
    </li>

  </ul>

</div>
$red: crimson !default;
$blue: navy !default;
$purple: purple !default;
$white: #fff !default;
// Gradient
@mixin gradient ($start, $middle, $end, $start-opacity: 0.8, $middle-opacity: 0.5, $end-opacity: 0.8) {
  background: $start;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba($start, $start-opacity) 0%, rgba($middle, $middle-opacity) 50%, rgba($middle, $middle-opacity) 51%, rgba($end, $end-opacity) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba($start, $start-opacity) 0%, rgba($middle, $middle-opacity) 50%, rgba($middle, $middle-opacity) 51%, rgba($end, $end-opacity) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba($start, $start-opacity) 0%, rgba($middle, $middle-opacity) 50%, rgba($middle, $middle-opacity) 51%, rgba($end, $end-opacity) 100%);
}

@mixin gradient-lin ($start, $middle, $end) {
  background: $start;
  /* Old browsers */
  background: -moz-linear-gradient(left, $start 0%, $middle 50%, $middle 51%, $end 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, $start 0%, $middle 50%, $middle 51%, $end 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, $start 0%, $middle 50%, $middle 51%, $end 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

@mixin gradient-img ($start, $middle, $end) {
  background-image: linear-gradient(90deg, $start, $middle, $end), linear-gradient(90deg, $start, $middle, $end);
  background-size: 100% 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

// Gradient Button styles
@mixin gradient-button ($start, $middle, $end, $width: 205px, $padding: 20px, $font-size: 16px, $border-width: 2px) {
  text-transform: uppercase;
  font-size: $font-size;
  font-weight: normal;
  letter-spacing: 2px;
  box-sizing: border-box;
  border-radius: 50px;
  width: $width;
  max-width: 100%;
  text-align: center;
  padding: $padding;
  border-left: $border-width solid $start;
  border-right: $border-width solid $end;
  display: block;
  @include gradient-img($start, $middle, $end);
}

body {
  background: $white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-size: 56px;
  margin-bottom: 0px;
  line-height: 56px;
  text-align: center;
  padding: 0;
  font-family: sans-serif;
  background: $red;
  padding: 0;
  line-height: 1.2;
  @include gradient-lin($blue, $purple, $red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: $blue;
}

ol {
  width: 500px;
  font-size: 16px;
  color: #222;
  margin: 0;
  li {
    margin: 0px 0px 20px 0px;
  }
}

.collection {
  ul {
    list-style: none;
  }
  li {
    margin: 20px 0px;
    padding: 0;
  }
  .collection-item-description,
  .collection-item-image {
    display: none;
  }
  .collection-item-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    a {
      text-decoration: none;
      padding: 25px 40px;
      font-size: 18px;
      display: block;
      line-height: 1;
    }
  }
}

.rounded {
  .collection-item-label {
    a {
      @include gradient-button ($red, $purple, $blue);
      &:hover {
        @include gradient-lin($blue, $purple, $red);
        color: $white;
      }
    }
  }
}

.square {
  .collection-item-label {
    a {
      @include gradient-button ($red, $purple, $blue);
      border-radius: 0px;
      &:hover {
        @include gradient-lin($blue, $purple, $red);
        color: $white;
      }
    }
  }
}

.solid {
  .collection-item-label {
    a {
      border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(90deg, salmon, salmon), linear-gradient(90deg, $red, $blue);
      color: $white;
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 2px;
      box-sizing: border-box;
      width: 205px;
      max-width: 100%;
      border-radius: 50px;
      text-align: center;
      padding: 20px;
      &:hover {
        @include gradient-lin($blue, $purple, $red);
        color: $white;
      }
    }
  }
}

.color {
  .collection-item-label {
    a {
      @include gradient-lin($blue, $purple, $red);
      color: $white;
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 2px;
      box-sizing: border-box;
      width: 205px;
      max-width: 100%;
      border-radius: 50px;
      text-align: center;
      padding: 20px;
      &:hover {
        @include gradient-lin($red, $purple, $blue);
        color: $white;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.