幽灵按钮html,CSS构建的材质化元素：幽灵按钮（有边框无填充）

CSS

语言：

CSSSCSS

确定

.pure-material-button-outlined {

position: relative;

display: inline-block;

box-sizing: border-box;

border: solid 1px;

border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.24);

border-radius: 4px;

padding: 0 16px;

min-width: 64px;

height: 36px;

vertical-align: middle;

text-align: center;

text-overflow: ellipsis;

text-transform: uppercase;

color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));

background-color: transparent;

font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);

font-size: 14px;

font-weight: 500;

line-height: 34px;

overflow: hidden;

outline: none;

cursor: pointer;

}

.pure-material-button-outlined::-moz-focus-inner {

border: none;

}

/* Overlay */

.pure-material-button-outlined::before {

content: "";

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

background-color: currentColor;

opacity: 0;

transition: opacity 0.2s;

}

/* Ripple */

.pure-material-button-outlined::after {

content: "";

position: absolute;

left: 50%;

top: 50%;

border-radius: 50%;

padding: 50%;

width: 32px;

height: 32px;

background-color: currentColor;

opacity: 0;

transform: translate(-50%, -50%) scale(1) ;

transition: opacity 1s, transform 0.5s;

}

/* Hover, Focus */

.pure-material-button-outlined:hover::before {

opacity: 0.04;

}

.pure-material-button-outlined:focus::before {

opacity: 0.12;

}

.pure-material-button-outlined:hover:focus::before {

opacity: 0.16;

}

/* Active */

.pure-material-button-outlined:active::after {

opacity: 0.16;

transform: translate(-50%, -50%) scale(0);

transition: transform 0s;

}

/* Disabled */

.pure-material-button-outlined:disabled {

color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);

background-color: transparent;

cursor: initial;

}

.pure-material-button-outlined:disabled::before {

opacity: 0;

}

.pure-material-button-outlined:disabled::after {

opacity: 0;

}