按钮hover样式

最新推荐文章于 2024-06-24 09:37:32 发布

海绵老呆

最新推荐文章于 2024-06-24 09:37:32 发布

阅读量3.9k

点赞数 10

文章标签： css

本文链接：https://blog.csdn.net/m0_37343874/article/details/108274219

版权

1.圆形效果

在这里插入图片描述

<button>Hover me</button>

 button{
            border: 0;
            border-radius: 50px;
            color: white;
            padding: 15px 20px;
            margin: 20px;
            text-transform: uppercase;

            background: red;
            background: linear-gradient(to right, #008bff 50%, #be4c46 50%);
            background-size:  200% 100%;
            background-position: right bottom;
            transition: all 1s ease;
        }
        button:hover {
            background-position: left bottom;
        }

2.霓虹效果

在这里插入图片描述

<div id="neon-btn">
  <button class="btn one">Hover me</button>
  <button  class="btn two">Hover me</button>
  <button  class="btn three">Hover me</button>
</div>

#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;
}

.one {
  color: #4cc9f0;
}

.two {
  color: #f038ff;
}

.three {
  color: #b9e769;
}

.btn:hover {
  color: white;
  border: 0;
}

.one:hover {
  background-color: #4cc9f0;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
}

.two:hover {
  background-color: #f038ff;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}

.three:hover {
  background-color: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}

3.边框效果

在这里插入图片描述

<div id="draw-border">
  <button>Hover me</button>
</div>

#draw-border {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

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;
  position: absolute;
  content: '';
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

button::after {
  bottom: 0;
  right: 0;
}

button::before {
  top: 0;
  left: 0;
}

button:hover::before, button:hover::after {
  width: 100%;
  height: 100%;
}

button:hover::before {
  border-top-color: #4361ee;
  border-right-color: #4361ee;
  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

button:hover::after {
  border-bottom-color: #4361ee;
  border-left-color: #4361ee;
  transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
}

4.圆角效果

在这里插入图片描述

<div id="border-btn">
  <button>Hover me</button>
</div>

#border-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  border: 0;
  border-radius: 10px;
  background: #2ec4b6;
  text-transform: uppercase;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 30px;
  outline: none;
  position: relative;
  transition: border-radius 3s;
  -webkit-transition: border-radius 3s;
}

button:hover {
   border-bottom-right-radius: 50px;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 10px;
   border-top-right-radius: 10px;
}

5.冰冻效果

在这里插入图片描述

<div id="frozen-btn">
    <button class="green">Hover me</button>
    <button class="purple">Hover me</button>
</div>

#frozen-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        button {
            border: 0;
            margin: 20px;
            text-transform: uppercase;
            font-size: 20px;
            font-weight: bold;
            padding: 15px 50px;
            border-radius: 50px;
            color: white;
            outline: none;
            position: relative;
        }

        button:before{
            content: '';
            display: block;
            background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
            background-size: 210% 100%;
            background-position: right bottom;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            bottom:0;
            right:0;
            left: 0;
            border-radius: 50px;
            transition: all 1s;
            -webkit-transition: all 1s;
        }

        .green {
            background-image: linear-gradient(to right, #25aae1, #40e495);
            box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
        }

        .purple {
            background-image: linear-gradient(to right, #6253e1, #852D91);
            box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
        }

        .purple:hover:before {
            background-position: left bottom;
        }

        .green:hover:before {
            background-position: left bottom;
        }

6.闪亮效果

在这里插入图片描述

<div id="shiny-shadow">
    <button><span>Hover me</span></button>
</div>

        #shiny-shadow {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: #1c2541;
        }

        button {
            border: 2px solid white;
            background: transparent;
            text-transform: uppercase;
            color: white;
            padding: 15px 50px;
            outline: none;
            overflow: hidden;
            position: relative;
        }

        span {
            z-index: 20;
        }

        button:after {
            content: '';
            display: block;
            position: absolute;
            top: -36px;
            left: -100px;
            background: white;
            width: 50px;
            height: 125px;
            opacity: 0.2;
            transform: rotate(-45deg);
        }

        button:hover:after {
            left: 120%;
            transition: all 1s cubic-bezier(0.3, 1, 0.2, 1);
            -webkit-transition: all 1s cubic-bezier(0.3, 1, 0.2, 1);
        }

7.加载效果

在这里插入图片描述

<div id="loading-btn">
    <button><span>Hover me</span></button>
</div>

        #loading-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        button {
            background: transparent;
            border: 0;
            border-radius: 0;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 20px;
            padding: 15px 50px;
            position: relative;
        }

        button:before {
            transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
            content: '';
            width: 1%;
            height: 100%;
            background: #ff5964;
            position: absolute;
            top: 0;
            left: 0;
        }

        button span {
            mix-blend-mode: darken;
        }

        button:hover:before {
            background: #ff5964;
            width: 100%;
        }

备注：文章信息来源
公众号：JavaScript

海绵老呆

关注

10
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
按钮hover样式

1.圆形效果<button>Hover me</button> button{ border: 0; border-radius: 50px; color: white; padding: 15px 20px; margin: 20px; text-transform: uppercase; backgrou
复制链接

扫一扫