5个实用新颖的CSS3菜单按钮悬停动画

CSS Buttons hover effects

css3, button, hover

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3602
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    margin: 0px;
    background: #ED8761;
}
.wrapper {
    margin: 0px 30px;
}
.box {
    background: white;
    min-height: 100px;
    max-width: 500px;
    margin: 30px auto;
    display: flex;
    flex: column nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0px 0px 48px -15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 48px -15px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 48px -15px rgba(0, 0, 0, 0.5);
}
a {
    color: white;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: bold;
    letter-spacing: .1rem;
    text-decoration: none;
    padding: 10px;
}
/* SCALE */

.btn.one {
    transition: all 300ms;
}
.btn.one:hover {
    transform: scale(1.1);
}
.btn.one a {
    background: #A91A1B;
    transition: 1s;
}
.btn.one a:hover {
    background: #ED8761;
    transition: 1s;
}
/* ROTATE */

.btn.two {
    transition: all 1s ease-in-out;
}
.btn.two a {
    background: #F1BE65;
    transition: all 1s ease-in-out;
}
.btn.two a:hover {
    background: #E56399;
    transition: all 1s ease-in-out;
}
.btn.two:hover {
    transform: rotate(720deg);
}
/* UNDERLINE */

.btn.three a {
    background: #fff;
    color: #7FD1B9;
    font-size: .72rem;
    letter-spacing: .05rem;
    transition: all 1.1s 100ms;
}
.btn.three ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding: 20px 10px;
}
.btn.three li {
    float: left;
}
.btn.three li a {
    display: inline;
}
.btn.three {
    transition: all 1s ease-in-out;
}
.btn.three ul li a {
    position: relative;
}
.btn.three ul li a:after {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 0%;
    height: 1px;
    background: #aaa;
    margin-bottom: 0px;
    color: transparent;
    content: "";
    visibility: hidden;
    transition: all 1.1s 100ms;
}
.btn.three ul li a:hover:after {
    visibility: visible;
    width: 100%;
    transition: all 1s;
}
.btn.three a:hover {
    /*   background: #E5D4CE; */
    
    color: #69AF9A;
    transition: all 1s;
}
.btn.three #active {
    background: #eee;
}
/* 'hello my name is' tag */

.btn.four {
    transition: all 1s ease-in-out;
}
.btn.four a {
    background: #eee;
    color: #aaa;
    font-size: .72rem;
    letter-spacing: .05rem;
    transition: all 400ms ease 0.1s;
}
.btn.four a:hover {
    transition: all 600ms ease 0.1s;
    background: white;
    color: #A44A3F;
}
.btn.four ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding: 20px 10px;
}
.btn.four li {
    float: left;
    z-index: 2;
}
.btn.four li a {
    display: inline;
    z-index: 2;
}
.btn.four ul li {
    /*&:first-child a:hover:before {
    top: -10px;
    left: -5px;
    background: #3F7CAC;
    height: 100%;
    transition: all 300ms;
    visibility: visible;
  }
  &:last-child a:hover:before {
    top: 10px;
    right: -5px;
    background: #3F7CAC;
    height: 100%;
    transition: all 300ms;
    visibility: visible;
  }*/
}
.btn.four ul li a {
    position: relative;
}
.btn.four ul li a:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 0px;
    z-index: -1;
    content: "";
    visibility: hidden;
    border-radius: 3px;
    transition: all 400ms ease 0.1s;
}
.btn.four ul li a:hover:before {
    height: 47px;
    background: #3F7CAC;
    position: absolute;
    display: block;
    margin: auto;
    content: "";
    transition: all 600ms ease 0.1s;
    visibility: visible;
}
/* OVERLINE CIRCLE */

.btn.five {
    transition: all 1s ease-in-out;
}
.btn.five a {
    background: #74A57F;
    color: #fff;
    padding: 5px 10px;
}
.btn.five a:hover {
    transition: all 1s ease;
}
.btn.five ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 0px 0px;
}
.btn.five li {
    float: left;
    z-index: 2;
}
.btn.five li:last-child a {
    border-radius: 0px 10px 10px 0px;
}
.btn.five li:first-child a {
    border-radius: 10px 0px 0px 10px;
}
.btn.five li a {
    display: inline;
    z-index: 2;
}
.btn.five ul li a {
    position: relative;
}
.btn.five ul li a:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    content: "";
    border-radius: 50%;
    width: 30px;
    transform: translate(0px, 0px);
    transition: all 300ms;
}
.btn.five ul li a:hover:before {
    transform: translate(0px, -8px);
    background: #077187;
    position: absolute;
    display: block;
    margin: auto;
    content: "";
    transition: transform 200ms;
    visibility: visible;
}
.btn.five a#active {
    background: #65916F;
    transition: transform 200ms 200ms;
}
.btn.five a#active:after {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    content: "";
    border-radius: 50%;
    width: 30px;
    background: #D6BA73;
    transform: translate(0px, -8px);
    transition: all 300ms 200ms;
}
.btn.five a#active:hover:after {
    transform: translate(0px, 0px);
    transition: transform 200ms;
}
.btn.five a#active:hover:before {
    transition: transform 200ms 300ms;
}

HTML

<div class="wrapper">
    <div class="box">
        <div class='btn one'><a rel="nofollow" rel="noreferrer" href="#">Home</a>
        </div>
        <div class='btn one'><a rel="nofollow" rel="noreferrer" href="#">Profile</a>
        </div>
        <div class='btn one'><a rel="nofollow" rel="noreferrer" href="#">Submit</a>
        </div>
        <div class='btn one'><a rel="nofollow" rel="noreferrer" href="#">Settings</a>
        </div>
        <div class='btn one'><a rel="nofollow" rel="noreferrer" href="#">Archive</a>
        </div>
    </div>
    <div class="box">
        <div class='btn two'><a rel="nofollow" rel="noreferrer" href="#">Home</a>
        </div>
        <div class='btn two'><a rel="nofollow" rel="noreferrer" href="#">Profile</a>
        </div>
        <div class='btn two'><a rel="nofollow" rel="noreferrer" href="#">Submit</a>
        </div>
        <div class='btn two'><a rel="nofollow" rel="noreferrer" href="#">Settings</a>
        </div>
        <div class='btn two'><a rel="nofollow" rel="noreferrer" href="#">Archive</a>
        </div>
    </div>
    <div class="box">
        <nav class="btn three">
            <ul>
                <li><a rel="nofollow" rel="noreferrer" href="#" id="active">Home</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Profile</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Submit</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Settings</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Archive</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="box">
        <nav class="btn four">
            <ul>
                <li><a rel="nofollow" rel="noreferrer" href="#">Home</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Profile</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Submit</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Settings</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Archive</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="box">
        <nav class="btn five">
            <ul>
                <li><a rel="nofollow" rel="noreferrer" href="#">Home</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#" id="active">Profile</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Submit</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Settings</a>
                </li>
                <li><a rel="nofollow" rel="noreferrer" href="#">Archive</a>
                </li>
            </ul>
        </nav>
    </div>

</div>

CSS Buttons hover effects

css3, button, hover

编辑器支持Emmet

快捷键

CSS Buttons hover effects

css3, button, hover

使用CSS3 box-shadow实现的7个按钮悬停动画特效

纯CSS3实现的20个汉堡菜单按钮动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：