css:hover用法(2) 霓虹灯效果,主要时hover+ box-shadow属性进行渲染

<template>
  <div>
    <div id="neon-btn">
      css霓虹灯效果,主要时hover+ box-shadow属性进行渲染
      <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>
#neon-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
  background: #031628;
}

.btn {
  border: 1px solid;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 300;
}

猜你喜欢

转载自blog.csdn.net/jieweiwujie/article/details/126647344