Files
dolibarr/htdocs/public/webportal/css/btn.css
2025-12-05 10:27:29 +01:00

57 lines
1.4 KiB
CSS

/*
* BUTTON With Low emphasis
*/
button.btn-low-emphasis{
text-align: center;
display: inline-block;
border: none;
outline: none;
cursor: pointer;
margin: 0;
padding: 0;
width: auto;
min-width: 1.5em;
min-height: 1.5em;
line-height: 1.5em;
overflow: visible;
background: transparent;
background-position: center; /* used for hover ripple effect */
background-size: 0%;
color: var(--colortextlink, inherit);
font: inherit;
line-height: normal;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable input types in iOS */
-webkit-appearance: none;
transition: background 0.8s;/* used for hover ripple effect */
background: transparent radial-gradient(circle, transparent 1%, hsla(var(--colortextlink-h),var(--colortextlink-s) ,var(--colortextlink-l) , 0.1) 1%, transparent 10%) center/15000%;
}
button.btn-low-emphasis.--btn-icon{
border-radius: 100%;
}
button.btn-low-emphasis :is(.fa, .fas){
color: var(--colortextlink, inherit);
opacity: 0.4;
}
button.btn-low-emphasis:is(:focus,:hover) :is(.fa, .fas){
opacity: 0.8;
}
button.btn-low-emphasis.--btn-icon:active {
background-color: hsla(var(--colortextlink-h),var(--colortextlink-s) ,var(--colortextlink-l) , 0.1);
background-size: 100%;
transition: background 0s;/* used for hover ripple effect */
}