css代码4种按钮特效 【hover属性】_css button hover

1. 霓虹效果

 完整代码如下：

html：

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

css：

.neon-btn
{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
    background: rgb(218, 216, 216);
}
.btn
{
    border: 1px solid;
    background: transparent;
    text-transform: uppercase;
    font-size: 14px;
    padding-right: 10px 20px;
    font-weight: bold;
}
.btn .one
{
    color: #4cc9f0;
    border: #4cc9f0;
}
.btn .two
{
    color: #008a70;
}
.btn .three
{
    color: #926a8f;
}
.btn:hover
{
    color: white;
    border: 0;
}
.one:hover{
    background: #4cc9f0;
    box-shadow: 10PX 10PX 99PX 6PX rgba(76,201,240,1);
    /* 
    boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值
    和一个可选的 inset 关键字来规定。省略长度的值是 0。
        h-shadow	必需的。水平阴影的位置。允许负值
        v-shadow	必需的。垂直阴影的位置。允许负值
        blur	可选。模糊距离
        spread	可选。阴影的大小
        color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
        inset	可选。从外层的阴影（开始时）改变阴影内侧阴影 */
}
.two:hover{
    background: #008a70;
    box-shadow: 10PX 10PX 99PX 6PX #008a70;
}
.three:hover{
    background: #926a8f;
    box-shadow: 10PX 10PX 99PX 6PX #926a8f;
}

2. 冰冻效果

 完整代码如下：

html：

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

css：

.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（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
    outline简写属性在一个声明中设置所有的轮廓属性。
    可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width
    如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。 */
    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属性设置背景图像的起始位置。
     */
    background-position: right bottom;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 50px;
    /* 
    transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。
    提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。
    注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
        none	没有属性会获得过渡效果。
        all	所有属性都将获得过渡效果。
        property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
*/
    transition: all 1s;
}
.green
{
    background-image: linear-gradient(to right,#25aae1,#40e495);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 1);
}
.purple
{
    background-image: linear-gradient(to right,#6253e1,#852D91);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.green:hover:before
{
    background-position: left top;
}
.purple:hover::before
{
    background-position: left bottom;
}

3. 闪亮效果

完整代码如下：

html：

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

 css：

.shiny-shadow
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #1c2541;
}
button
{
    border: 2px solid white;
    /* 
    background-color属性设置一个元素的背景颜色。
    元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
        color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
        transparent	指定背景颜色应该是透明的。这是默认
        inherit	指定背景颜色，应该从父元素继承
    */
    background: transparent;
    text-transform: uppercase;
    color: white;
    padding: 15px 50px;
    outline: none;
    /* 
    overflow属性指定如果内容溢出一个元素的框，会发生什么。
        visible	默认值。内容不会被修剪，会呈现在元素框之外。
        hidden	内容会被修剪，并且其余内容是不可见的。
        scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。    
        auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
        inherit	规定应该从父元素继承 overflow 属性的值。 */
    overflow: hidden;
    position: relative;
}
span
{
    z-index: 20;
}
button::after
{
    content:'';
    display: block;
    position: absolute;
    top: -30px;
    left: -100px;
    background: white;
    width: 50px;
    height: 125px;
    opacity: 20%;
    transform: rotate(-45deg);
}
button:hover::after
{
    left: 120%;
    transition: all 600ms cubic-bezier(0.3,1,0.2,1);
}

4. 加载效果

 完整代码如下：

html：

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

css：

.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: 50px 50px;
    position: relative;
}
button::before
{
    transition: all 0.8s cubic-bezier(0.7,-0.5,0.2,2);
    content: '';
    width: 0%;
    height: 100%;
    background: #198396;
    position: absolute;
    top: 0;
    left: 0;
}
button span
{
    /* 
    mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
        默认值为normal  
        darken */
    mix-blend-mode: darken;
}
button:hover::before
{
    background: #198396;
    width: 100%;
}

更多css小动画，js小案例点击我的主页：

我的主页