炫酷按钮

下面是基于html和css实现的一些非常炫酷的按钮

下面直接上代码：

<template>
  <div class="wrapper">
    <div class="buttonWrapper">
      <div class="button button1"><p>Slide in Bottom Border</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button2"><p>Slide in Top Border</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button3"><p>Push Down Effect</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button4"><p>Background Swap</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button5"><p>Pop Out Effect</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button6"><p>Quick Click</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button7"><p>Slide Down Background</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button8"><p>Slide Up Background</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button9"><p>Slide Right Background</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button10"><p>Slide Left Background</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button11"><p>Radiating Border</p></div>
    </div>
    <div class="buttonWrapper">
      <div class="button button12"><p>Spinning Diamond</p></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {},
  watch: {},
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

$purple: #c397d8;
$red: #d54e53;
$blue: #7aa6da;
$orange: #e78c45;
$turquoise: #4dd9b2;
$green: #b9ca4a;
$yellow: #ffde00;

body {
  background: linear-gradient(
    #222 0%,
    #222 50%,
    lighten(#222, 5) 50%,
    lighten(#222, 5) 100%
  );
  background-size: 3px 3px;
}

p {
  font-family: 'Merriweather', serif;
  font-size: 1.2em;
  letter-spacing: 1px;
  color: #222;
}

.wrapper {
  width: 80%;
  margin: 50px auto;
  text-align: center;
}

.buttonWrapper {
  margin: 50px;
}

.button {
  width: 350px;
  margin: 0 auto;
  padding: 5px 10px;
  cursor: pointer;
}

.button1 {
  background: $green;
  position: relative;
  &:after {
    content: '';
    background: linear-gradient(
      to right,
      #fff 0%,
      #fff 50%,
      #222 50%,
      #222 100%
    );
    background-position: 100% 0;
    background-size: 200% 100%;
    width: 100%;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 0;
    transition: all 0.5s;
  }
  &:hover {
    &:after {
      background-position: 0 0;
    }
  }
}

.button2 {
  background-color: $purple;
  position: relative;
  &:before {
    content: '';
    background: linear-gradient(
      to right,
      #fff 0%,
      #fff 50%,
      #222 50%,
      #222 100%
    );
    background-position: 100% 0;
    background-size: 200% 100%;
    width: 100%;
    height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;
  }
  &:hover {
    &:before {
      background-position: 0 0;
    }
  }
}

.button3 {
  background-color: $orange;
  position: relative;
  box-shadow: 0px 8px darken($orange, 25);
  transition: all 0.25s;
  top: 0;
  &:active {
    top: 4px;
    box-shadow: 0px 4px darken($orange, 25);
  }
}

.button4 {
  background: linear-gradient(
    -45deg,
    darken($turquoise, 25) 0%,
    darken($turquoise, 25) 33.33%,
    $turquoise 33.33%,
    $turquoise 66.66%,
    darken($turquoise, 25) 66.66%
  );
  &:hover {
    background: linear-gradient(
      45deg,
      darken($turquoise, 25) 0%,
      darken($turquoise, 25) 33.33%,
      $turquoise 33.33%,
      $turquoise 66.66%,
      darken($turquoise, 25) 66.66%
    );
  }
}

.button5 {
  background: $blue;
  transition: all 0.25s;
  box-shadow: 1px 1px 2px #000;
  &:hover {
    transform: scale(1.05);
  }
}

.button6 {
  background: $red;
  border-radius: 25px;
  box-shadow: 0px 0px 15px #000;
  position: relative;
  top: 0;
  &:active {
    top: 4px;
  }
}

.button7 {
  background: linear-gradient($turquoise 0%, $turquoise 50%, $yellow 50%);
  background-size: 100% 200%;
  background-position: 100% 100%;
  transition: all 0.5s;
  &:hover {
    background-position: 0 0;
  }
}

.button8 {
  background: linear-gradient($green 0%, $green 50%, $blue 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: all 0.5s;
  &:hover {
    background-position: 100% 100%;
  }
}

.button9 {
  background: linear-gradient(to right, $red 0%, $red 50%, $turquoise 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: all 0.5s;
  &:hover {
    background-position: 0 0;
  }
}

.button10 {
  background: linear-gradient(to right, $purple 0%, $purple 50%, $yellow 50%);
  background-size: 200% 100%;
  background-position: 0 0;
  transition: all 0.5s;
  &:hover {
    background-position: 100% 0;
  }
}

.button11 {
  background: $orange;
  position: relative;
  &:after {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid $orange;
    transition: all 0.5s ease-in-out;
    z-index: -10;
  }
  &:hover {
    &:after {
      height: calc(100% + 30px);
      width: calc(100% + 30px);
      top: -15px;
      left: -15px;
    }
  }
}

.button12 {
  background: $turquoise;
  position: relative;
  transition: all 0.25s ease-in-out;
  &:after {
    content: '';
    background: $turquoise;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 83%;
    left: 46%;
    transform: rotate(45deg);
    transition: all 0.25s ease-in-out;
  }
  &:hover {
    background: lighten($turquoise, 25);
    &:after {
      transform: rotate(135deg);
    }
  }
}
</style>