原创 css:hover用法（3）边框效果

<template>
  <div>
    <div id="neon-btn">
      <button class="btn one">Hover Hover look</button>
      <button class="btn two">Hover Hover look</button>
      <button class="btn three">Hover Hover look</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "page",
  props: {},
  data() {
    return {
      name: "这是子组件的name",
    };
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
#draw-border {
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  border: 0;
  background: none;
  text-transform: uppercase;
  color: #4361ee;
  font-weight: bold;
  position: relative;
  outline: none;
  padding: 10px 20px;
  box-sizing: border-box;
}

button::before,
button::after {
  box-sizing: inherit;
  p