Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diggeddy/276e7e80cbdc01f48b2239431ae09740 to your computer and use it in GitHub Desktop.
Save diggeddy/276e7e80cbdc01f48b2239431ae09740 to your computer and use it in GitHub Desktop.
Using the Icon List widget to create double (multiple) buttons
/* Elementor - create a double button with Icon List widget */
.db-list-button .elementor-icon-list-items {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
}
.db-list-button .elementor-icon-list-item a {
display: block;
flex: 0 0 auto;
padding: 40px;
color: #fff;
border-bottom: 25px solid rgba(0,0,0,0.5);
transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.db-list-button .elementor-icon-list-item:nth-child(1) a {
background-color: green;
border-radius: 10px 0 0 5px;
}
.db-list-button .elementor-icon-list-item:nth-child(2) a {
background-color: red;
border-radius: 0 10px 5px 0;
}
.db-list-button .elementor-icon-list-item:active a {
border-bottom: 0px solid transparent;
margin-top: 25px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment