Files
roxo-hugo/assets/css/buttons.css
Al Murad Uzzaman f8b297eaad feat: migrate Hugo Bootstrap theme to latest Hugo with Tailwind CSS and refactor codebase
* replace Bootstrap-based styling with Tailwind CSS
* update theme compatibility for latest Hugo version
* refactor templates and partials
* fix outdated code and broken components
* improve project structure and maintainability
* optimize styling and frontend build setup
2026-05-10 13:38:01 +06:00

45 lines
1013 B
CSS
Executable File

.btn {
@apply inline-block border-0 rounded-none px-10 py-3.75 font-secondary font-light text-white transition-colors duration-300 cursor-pointer;
&:focus {
box-shadow: none;
}
.btn-area {
@apply block overflow-hidden;
span {
@apply relative inline-block py-[2px] origin-left transition-transform duration-[900ms];
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
&::after {
content: attr(data-text);
@apply absolute left-0 top-[150%] origin-left;
transform: skewY(30deg);
transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
}
}
&:hover,
&:visited {
.btn-area {
span {
transform: translateY(-150%) skewY(7deg);
&::after {
transform: skewY(-7deg);
}
}
}
}
}
.btn-primary {
@apply border-primary bg-primary/85 hover:bg-primary text-text-light;
}
.btn-secondary {
@apply border-secondary bg-secondary/85 hover:bg-secondary text-text-light;
}