/home/moonrcjl/template.moontelict.com/sass-agency/assets/sass/components/_buttons.scss
.mt__btn-1{
position: relative;
text-transform: capitalize;
padding: 11px 20px;
border-radius: 12px;
background-color: $mt__blue;
color: $mt__primary-color;
font-size: 16px;
font-weight: 700;
line-height: 26px;
font-family: $mt__secondary-font;
display: inline-block;
text-align: center;
transition: $mt__trans01;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid transparent;
i{
font-size: 18px;
color: $mt__primary-color;
margin-left: 2px;
}
&:hover{
background-color: $mt__secondary-color;
border: 1px solid $mt__primary-color;
}
}
.mt__btn-2{
position: relative;
text-transform: capitalize;
padding: 13px 24px;
border-radius: 12px;
background-color: $mt__secondary-color;
color: $mt__primary-color;
font-size: 16px;
font-weight: 700;
line-height: 26px;
font-family: $mt__secondary-font;
display: inline-block;
text-align: center;
transition: $mt__trans01;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid $mt__primary-color;
i{
font-size: 18px;
color: $mt__primary-color;
margin-left: 2px;
}
&:hover{
background-color: $mt__blue;
border: 1px solid transparent;
}
}
.mt__btn-3{
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: $mt__secondary-color;
font-family: $mt__secondary-font;
background-color: $mt__green;
border-radius: 50px;
padding:15px 44px 15px 24px;
position: relative;
transition: linear 0.3s;
border: 2px solid $mt__green;
display: inline-block;
&:hover{
background-color: $mt__secondary-color;
color: $mt__primary-color;
svg{
path{
fill:$mt__primary-color
}
}
}
svg{
position: absolute;
top:50%;
transform: translateY(-50%);
margin-left: 5px;
path{
transition: linear 0.3s;
}
}
}
.mt__btn-4{
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: $mt__primary-color;
font-family: $mt__secondary-font;
border-radius: 50px;
padding:15px 44px 15px 24px;
position: relative;
transition: linear 0.3s;
border: 2px solid $mt__primary-color;
display: inline-block;
background-color: transparent;
&:hover{
background-color: $mt__blue;
color: $mt__primary-color;
border-color: $mt__blue;
svg{
path{
fill:$mt__primary-color
}
}
}
svg{
position: absolute;
top:50%;
transform: translateY(-50%);
margin-left: 5px;
path{
transition: linear 0.3s;
}
}
}
.mt__btn-5{
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: $mt__primary-color;
font-family: $mt__secondary-font;
border-radius: 50px;
padding:15px 44px 15px 24px;
position: relative;
transition: linear 0.3s;
border: 2px solid transparent;
display: inline-block;
background-color: $mt__blue;
&:hover{
background-color: transparent;
color: $mt__primary-color;
border-color: $mt__primary-color;
svg{
path{
fill:$mt__primary-color
}
}
}
svg{
position: absolute;
top:50%;
transform: translateY(-50%);
margin-left: 5px;
path{
transition: linear 0.3s;
}
}
}
.mt__banner-btn-group{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: -28px;
margin-top: 50px;
@include mt__screen-767{
flex-wrap: wrap;
row-gap: 10px;
}
a{
background-color: $mt__secondary-color;
color: $mt__primary-color;
border-color: $mt__green;
border-radius: 50px !important;
padding: 15px 25px;
&:hover{
background-color: $mt__green;
color: $mt__secondary-color;
}
}
&.mt__banner-btn-why-choose{
a{
background-color: $mt__primary-color;
color: $mt__secondary-color;
border: none;
&:hover{
background-color: $mt__blue;
color: $mt__primary-color;
}
}
}
}