Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button span {
border-bottom: 2px solid rgba(0,0,0,0);
transition: ease-in-out 300ms;
}
.kt-button:hover span {
border-bottom: 2px solid var(--global-palette1);
transition: ease-in-out 300ms;
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
a.kt-button .kt-btn-svg-icon {
transition: 0.3s ease;
}
a.kt-button:hover .kt-btn-svg-icon {
transform: translateX(4px);
transition: 0.3s ease;
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button {
padding: 0 0 1px 0 !important;
}
.kt-button span:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
height: 2px;
width: 0;
background: transparent;
}
.kt-button span:after {
transition: width .3s ease, background-color .3s ease, left .3s ease;
}
.kt-button:hover span:after {
width: 100%;
left: 0;
background: var(--global-palette1);
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button .kt-btn-svg-icon {
transition: 0.3s ease;
}
.kt-button:hover .kt-btn-svg-icon {
transform: translateX(4px);
transition: 0.3s ease;
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button {
background: linear-gradient(to top, var(--global-palette1) 50%, #fff 50%) !important;
background-size: 200% 300% !important;
background-position: top;
transition: all .35s ease-out !important;
}
.kt-button:hover {
background-position: bottom !important;
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button {
background: linear-gradient(to right, var(--global-palette1) 50%, #FFF 50%) !important;
background-size: 200% 200% !important;
background-position: right !important;
transition: all .35s ease-out !important;
}
.kt-button:hover {
background-position: left !important;
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button:hover {
letter-spacing: 3px;
}
.kt-btn-wrap:before, .kt-btn-wrap:after {
display:block;
content: '';
border-bottom: solid 3px var(--global-palette1);
transform: scaleX(0);
transition: transform 0.25s ease-in-out;
}
.kt-btn-wrap:hover:after, .kt-btn-wrap:hover:before {
transform: scaleX(1);
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button {
background-image: linear-gradient(var(--global-palette1), var(--global-palette1)) !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: 0% 100% !important;
transition: background-size 0.2s !important;
}
.kt-button:hover {
background-size: 100% 100% !important;
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button, .kt-button:hover {
letter-spacing: 1.7px;
padding: 0 0 0 30px !important;
height: 45px;
}
/* set the primary palette as rgb here */
.kt-button:hover {
background: rgba(4, 109, 146, 0.85) !important;
}
.kt-button .kt-btn-svg-icon {
background: var(--global-palette2);
margin-left: 30px;
z-index: 10;
transform: rotate(90deg);
}
.kt-button:hover .kt-btn-svg-icon svg {
opacity: 1 !important;
-webkit-transform: scale(1.3);
transform: scale(1.3);
transition: 0.25s ease;
}NO CSSNO CSSNO CSS
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
height: 2px;
width: 0;
background: transparent;
}
.kt-button:after {
transition: width .3s ease, background-color .3s ease, left .3s ease;
}
.kt-button:hover:after {
width: 100%;
left: 0;
background: var(--global-palette1);
}
Kopioi ylläoleva painike projektiisi ja alla oleva css esim. column tai row custon css kenttään.
.kt-button:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
height: 2px;
width: 0;
background: transparent;
}
.kt-button:hover:after {
width: 100%;
left: 0;
background: var(--global-palette1);
}