CSS3 悬停时出现折角效果的按钮

CSS-Only Folded Corner Text Reveal Button 折角的按钮，当鼠标悬停在折角上时，折角被揭开更大，显露出提示文本。

CSS3,按钮

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.amg-corner-button_wrap {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
}
.amg-corner-button_wrap:hover {
    width: 120px;
    height: 120px;
}
.amg-corner-button_wrap:hover div {
    width: 120px;
    height: 120px;
}
.amg-corner-button {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: #46982b;
    -webkit-box-shadow: -1px -1px 4px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: -1px -1px 4px 2px rgba(0, 0, 0, 0.25);
    box-shadow: -1px -1px 4px 2px rgba(0, 0, 0, 0.25);
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    overflow: hidden;
    -webkit-transition: width 300ms, height 300ms;
    -moz-transition: width 300ms, height 300ms;
    -ms-transition: width 300ms, height 300ms;
    -o-transition: width 300ms, height 300ms;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}
.amg-corner-button:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 0 120px 120px;
    border-style: solid;
    border-color: #46982b #fff;
}
.amg-corner-button_text {
    font-size: 14px;
    font-size: 1.4rem;
    width: 120px;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform-origin: center top center;
    -moz-transform-origin: center top center;
    -ms-transform-origin: center top center;
    -o-transform-origin: center top center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    text-align: center;
    color: #ffffff;
}
body {
    background: #000;
}
.generic-box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}

HTML

CSS-Only Folded Corner Text Reveal Button 折角的按钮，当鼠标悬停在折角上时，折角被揭开更大，显露出提示文本。

CSS3,按钮

编辑器支持Emmet

快捷键

CSS-Only Folded Corner Text Reveal Button 折角的按钮，当鼠标悬停在折角上时，折角被揭开更大，显露出提示文本。

CSS3,按钮

CSS3 悬停时出现对角线耀光效果的按钮

CSS3 悬停在按钮上时闪过流光的动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：