forked from 77media/video-flow
43 lines
1.2 KiB
CSS
43 lines
1.2 KiB
CSS
.add-project-btn {
|
|
display: flex;
|
|
height: 40px;
|
|
min-width: 168px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
--tw-bg-opacity: 0.1;
|
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
--tw-backdrop-blur: blur(10px);
|
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
}
|
|
.add-project-btn .icon {
|
|
/* --tw-text-opacity: 1;
|
|
color: rgb(29 33 41 / var(--tw-text-opacity)); */
|
|
transform: translate(-100px);
|
|
transition-property: transform;
|
|
transition-duration: 0.3s;
|
|
}
|
|
.add-project-btn .btn-text {
|
|
transform: translate(-14px);
|
|
transition-property: transform;
|
|
transition-duration: 0.3s;
|
|
font-weight: 600;
|
|
}
|
|
.add-project-btn:hover {
|
|
--tw-bg-opacity: 0.2;
|
|
}
|
|
.add-project-btn:hover .icon,
|
|
.add-project-btn:hover .btn-text {
|
|
transform: translate(0px);
|
|
}
|
|
.add-project-btn {
|
|
height: 8rem;
|
|
border-radius: 32px;
|
|
} |