Clickable Columns in CSS With Elementor

Hey everyone! Here’s how to pull off clickable columns in CSS with Elementor. In this video, we’re going to learn to make columns that look like this. The entire column will be clickable, and we’ll add some cool hover effects:

Make sure to place your CSS code in a child theme. If you’re not sure how child themes work, here’s a great article.

Here’s the code from the video:

/***** COLUMN CTAS *****/
.column-cta .elementor-button-wrapper a, body .elementor-widget-button.column-cta a.elementor-button {
     font-size: 18px;
     display: flex;
     width: 100%;
     min-height: 200px;
     background-color: transparent;
     background: transparent;
     align-items: center;
     justify-content: center;
     background-color: rgba(0,0,0,0.6);
     transition: background-color 0.5s ease;
 }
 .column-cta .elementor-button-wrapper a:hover, body .elementor-widget-button.column-cta a.elementor-button:hover {
     background-color: rgba(0,0,0,0.3);
 }
 .column-cta .elementor-button-wrapper a .elementor-button-text, body .elementor-widget-button.column-cta a.elementor-button .elementor-button-text {
     transition: margin-bottom 0.5s ease;
 }
 .column-cta .elementor-button-wrapper a:hover .elementor-button-text, body .elementor-widget-button.column-cta a.elementor-button:hover .elementor-button-text {
     margin-bottom: 20px;
 }