悬停时呈现玻璃闪光感的按钮

Chrome Glass Buttons

按钮，玻璃

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1595
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.btn-glass {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 1em 2em;
    font-family: Lato;
    font-weight: 300;
    border: 1px dotted transparent;
    letter-spacing: 0.98pt;
    text-transform: uppercase;
    -webkit-transition: background-position 2s cubic-bezier(0, 1, 0, 1), border-color 500ms, background-color 500ms;
    transition: background-position 2s cubic-bezier(0, 1, 0, 1), border-color 500ms, background-color 500ms;
    position: relative;
    background-attachment: fixed, scroll;
    background-size: 100vw 100vh, cover;
    background-position: center center, 0 0;
    background-image: -webkit-repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.075) 10%, rgba(255, 255, 255, 0.075) 14%, rgba(255, 255, 255, 0.15) 14%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.075) 17%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.075) 40%, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.075) 60%, rgba(255, 255, 255, 0.075) 66%, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0.075) 70%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(ellipse farthest-corner, transparent, rgba(0, 0, 0, 0.2) 110%);
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.075) 10%, rgba(255, 255, 255, 0.075) 14%, rgba(255, 255, 255, 0.15) 14%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.075) 17%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.075) 40%, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.075) 60%, rgba(255, 255, 255, 0.075) 66%, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0.075) 70%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse farthest-corner, transparent, rgba(0, 0, 0, 0.2) 110%);
}
.btn-glass:hover {
    background-position: -100vw 0, 0 0;
}
.btn-glass:active {
    background-position: -75vw 0, 0 0;
    border-style: solid;
}
.nav-light {
    background-color: white;
}
.nav-light .btn-glass {
    color: #585858;
    background-color: rgba(17, 17, 17, 0);
}
.nav-light .btn-glass:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: #000000;
    background-color: #111111;
}
.nav-light .btn-glass:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(17, 17, 17, 0.5);
}
.nav-light .btn-glass.btn-primary {
    color: #6ab1d1;
    background-color: rgba(42, 143, 189, 0);
}
.nav-light .btn-glass.btn-primary:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: #1c607e;
    background-color: #2a8fbd;
}
.nav-light .btn-glass.btn-primary:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(42, 143, 189, 0.5);
}
.nav-light .btn-glass.btn-success {
    color: #a5c75f;
    background-color: rgba(127, 175, 27, 0);
}
.nav-light .btn-glass.btn-success:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: #4f6d11;
    background-color: #7faf1b;
}
.nav-light .btn-glass.btn-success:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(127, 175, 27, 0.5);
}
.nav-light .btn-glass.btn-warning {
    color: #fccd69;
    background-color: rgba(251, 184, 41, 0);
}
.nav-light .btn-glass.btn-warning:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: #d49104;
    background-color: #fbb829;
}
.nav-light .btn-glass.btn-warning:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(251, 184, 41, 0.5);
}
.nav-light .btn-glass.btn-danger {
    color: #f56558;
    background-color: rgba(240, 35, 17, 0);
}
.nav-light .btn-glass.btn-danger:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: #aa180b;
    background-color: #f02311;
}
.nav-light .btn-glass.btn-danger:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(240, 35, 17, 0.5);
}
.nav-light .btn-glass.btn-info {
    color: #98e9f0;
    background-color: rgba(108, 223, 234, 0);
}
.nav-light .btn-glass.btn-info:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: #29d0e0;
    background-color: #6cdfea;
}
.nav-light .btn-glass.btn-info:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(108, 223, 234, 0.5);
}
.nav-dark {
    background-color: #444444;
}
.nav-dark .btn-glass {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(17, 17, 17, 0);
}
.nav-dark .btn-glass:hover {
    border-color: #000000;
    background-color: #111111;
}
.nav-dark .btn-glass:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(17, 17, 17, 0.5);
}
.nav-dark .btn-glass.btn-primary {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(42, 143, 189, 0);
}
.nav-dark .btn-glass.btn-primary:hover {
    border-color: #1c607e;
    background-color: #2a8fbd;
}
.nav-dark .btn-glass.btn-primary:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(42, 143, 189, 0.5);
}
.nav-dark .btn-glass.btn-success {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(127, 175, 27, 0);
}
.nav-dark .btn-glass.btn-success:hover {
    border-color: #4f6d11;
    background-color: #7faf1b;
}
.nav-dark .btn-glass.btn-success:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(127, 175, 27, 0.5);
}
.nav-dark .btn-glass.btn-warning {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(251, 184, 41, 0);
}
.nav-dark .btn-glass.btn-warning:hover {
    border-color: #d49104;
    background-color: #fbb829;
}
.nav-dark .btn-glass.btn-warning:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(251, 184, 41, 0.5);
}
.nav-dark .btn-glass.btn-danger {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(240, 35, 17, 0);
}
.nav-dark .btn-glass.btn-danger:hover {
    border-color: #aa180b;
    background-color: #f02311;
}
.nav-dark .btn-glass.btn-danger:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(240, 35, 17, 0.5);
}
.nav-dark .btn-glass.btn-info {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(108, 223, 234, 0);
}
.nav-dark .btn-glass.btn-info:hover {
    border-color: #29d0e0;
    background-color: #6cdfea;
}
.nav-dark .btn-glass.btn-info:active {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1em 0.5ex rgba(108, 223, 234, 0.5);
}
nav.btn-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
:root {
    font-family: 'Open Sans', sans;
    font-size: 11pt;
    line-height: 1.6;
    min-height: 100vh;
    background-attachment: fixed, scroll;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/grit-fs8.png), -webkit-radial-gradient(ellipse farthest-corner, #555555, #999999);
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/grit-fs8.png), radial-gradient(ellipse farthest-corner, #555555, #999999);
}
body {
    width: 75vw;
    margin: 4em auto;
    line-height: inherit;
}
article {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0 1ex 1em rgba(0, 0, 0, 0.3);
}
code {
    font-family: monospace;
    display: inline-block;
    padding: 0.5ex 1ch 0.25ex 1ch;
    background-color: #ccc;
    border-radius: 1ex;
    margin: 0 0.5ch;
}
article + article {
    margin-top: 4em;
}
article section {
    margin: 2em;
}
article > section > h2 {
    font-family: 'Lato';
    font-weight: 800;
    font-size: 1.3em;
    margin-bottom: 0.8em;
}
article > section > p {
    margin-bottom: 1em;
    text-indent: 2ch;
}
article > section > p:first-child,
article > section > h2 + p {
    text-indent: 0;
}
h1 {
    font-family: 'Lato';
    font-weight: 800;
    text-align: center;
    font-size: 5vw;
    color: rgba(255, 255, 255, 0.3);
}

HTML

<h1>Chrome/Glass Buttons</h1>

<article>
    <nav class="btn-bar nav-light">
        <a href="#" class="btn btn-glass">
      Default
    </a>
        <a href="#" class="btn btn-glass btn-primary">
            <i class="fa fa-fw fa-lg fa-chevron-right"></i> Primary
        </a>
        <a href="#" class="btn btn-glass btn-success">
            <i class="fa fa-fw fa-lg fa-check"></i> Success
        </a>
        <a href="#" class="btn btn-glass btn-warning">
            <i class="fa fa-fw fa-lg fa-exclamation "></i> Warning
        </a>
        <a href="#" class="btn btn-glass btn-danger">
            <i class="fa fa-fw fa-lg fa-times"></i> Danger
        </a>
        <a href="#" class="btn btn-glass btn-info">
            <i class="fa fa-fw fa-lg fa-info "></i> Info
        </a>
    </nav>
</article>

<article>
    <nav class="btn-bar nav-dark">
        <a href="#" class="btn btn-glass">
      Default
    </a>
        <a href="#" class="btn btn-glass btn-primary">
            <i class="fa fa-fw fa-lg fa-chevron-right"></i> Primary
        </a>
        <a href="#" class="btn btn-glass btn-success">
            <i class="fa fa-fw fa-lg fa-check"></i> Success
        </a>
        <a href="#" class="btn btn-glass btn-warning">
            <i class="fa fa-fw fa-lg fa-exclamation "></i> Warning
        </a>
        <a href="#" class="btn btn-glass btn-danger">
            <i class="fa fa-fw fa-lg fa-times"></i> Danger
        </a>
        <a href="#" class="btn btn-glass btn-info">
            <i class="fa fa-fw fa-lg fa-info "></i> Info
        </a>
    </nav>
</article>

<article>
    <section>
        Are you sure you want to delete <code>somefile.txt</code>?
    </section>
    <nav class="btn-bar nav-light">
        <a href="#" class="btn btn-glass btn-success">
            <i class="fa fa-fw fa-lg fa-check"></i> Ok
        </a>
        <a href="#" class="btn btn-glass btn-danger">
            <i class="fa fa-fw fa-lg fa-times"></i> No
        </a>
    </nav>
</article>

<article>
    <section>
        <h2>Check out when they scroll...</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, nisi voluptate tempora ea molestias vel! Mollitia architecto, accusamus nulla rerum magnam, nisi, facilis praesentium, aut quia placeat tempora voluptatem repudiandae!</p>
        <p>Nesciunt, molestias commodi totam vitae, voluptates debitis repellendus modi dicta dolores dolorem beatae laboriosam eaque, sed. Dolorem fuga voluptatibus vero eveniet iure. Sed nemo saepe delectus, expedita asperiores, dolor illo.</p>
        <p>Cum aspernatur, quidem dolorum accusamus quod vel, rem inventore tempora voluptas dolore deserunt eveniet doloribus obcaecati nesciunt error in illum, molestias explicabo corrupti commodi natus dicta placeat. A, laudantium, impedit.</p>
    </section>
    <nav class="btn-bar nav-dark">
        <a href="#" class="btn btn-glass btn-success">
            <i class="fa fa-fw fa-lg fa-check"></i> Approve
        </a>
        <a href="#" class="btn btn-glass btn-danger">
            <i class="fa fa-fw fa-lg fa-times"></i> Reject
        </a>
        <a href="#" class="btn btn-glass btn-info">
            <i class="fa fa-fw fa-lg fa-code"></i> Diff
        </a>
    </nav>
</article>

Chrome Glass Buttons

按钮，玻璃

编辑器支持Emmet

快捷键

Chrome Glass Buttons

按钮，玻璃

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：