Show hidden icon when hover on Call to Action widget

How to?

  1. Add Call to Widget to the content area
  2. Style the widget as same as mockup
  3. Don’t forget to style the ribbon on the widget setting 

    CTA Widget > Style > Ribbon

CSS:

				
					.tech-cta .elementor-cta {
	position: relative;
}

.tech-cta .elementor-ribbon {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	width: 50px;
	height: 50px;
	background-color: var( --e-global-color-primary);
	right: 5px;
	top: 5px;
	opacity: 0;
}

.tech-cta .elementor-ribbon .elementor-ribbon-inner {
	width: 50px;
	margin-top: 25px !important;
	transform: translateY(-50%) translateX(-50%) translateX(25px) rotate( 0deg) !important;
	line-height: 50px;
}

.tech-cta .elementor-cta:hover .elementor-ribbon {
	opacity: 1;
}

Example:

Colocation Services

Leverage our resilient, enterprise-grade infrastructure so you can create your own high availability data center.
Learn More