How To Create Photography & Photographer Portfolio Website Using Elementor Flexbox

919SHARES

Hide horizontal overflow for the entire page CSS

Text Rotated Animation Style CSS

.circle-wrapper {
    width: 144px;
    height: 144px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle-img{
        animation: rotateCircle 10s linear infinite;
        transition: all .4s;
}
.circle-wrapper:hover .smr-arrow-1 {
    transform: scale(0.9) !important;
}

.smr-arrow-1 {
    transition: all .3s linear;
}


@keyframes rotateCircle{
    0% {
    transform: rotate(360deg);
}
100% {
    transform: rotate(0deg);
}
}

Text Rotated Animation Style CSS Classes

circle-wrapper
circle-img
smr-arrow-1

Button Style CSS

/*button*/
.bdr-corner .elementor-button {
    display: inline-block;
    position: relative;
    border: none;
    border: 2px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bdr-corner .elementor-button:before, .bdr-corner .elementor-button:after,
.bdr-corner .elementor-button span:before,
.bdr-corner .elementor-button span:after {
  display: block;
  content: "";
  width: 11.5px;
  height: 12px;
  position: absolute;
}
.bdr-corner .elementor-button:before {
  top: -2px;
  left: -2px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  transition: 0.5s all;
}
.bdr-corner .elementor-button:after {
  top: -2px;
  right: -2px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: 0.5s all;
}

.bdr-corner .elementor-button span:before {
  bottom: -2px;
  left: -2px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transition: 0.5s all;
}
.bdr-corner .elementor-button span:after {
  bottom: -2px;
  right: -2px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: 0.5s all;
}

.bdr-corner .elementor-button:hover:before, .bdr-corner .elementor-button:hover:after {
  width: 100%;
  height: 100%;
  border-color: #fff;
}
.bdr-corner .elementor-button:hover span:before, .bdr-corner .elementor-button:hover span:after {
  width: 100%;
  height: 100%;
  border-color: #fff;
}


/*Button Size*/
.btn-size-195 .elementor-button {
    width: 195px;
    height: 56px;
}


/*Arrow Rotated CSS*/

.btn-arrow a.elementor-button:hover span.elementor-button-icon svg {transform: rotate(180deg);}

span.elementor-button-icon svg {
    transition: all .4s;
}
.jkit-post-title .post-title {
    margin: 0;
}

Button Style CSS Classes

bdr-corner
btn-size-195
btn-arrow