CSS to style Divi WooCommerce Add-To-Cart Icon Button

icon-add-to-cart-style.css

/*CSS to make sure the Quantity and Add to cart button are next to each other*/

.product .cart {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-top: 10px;
}

.product .cart button[type="submit"] {
    margin: 0 10px !important;
}

/*Styling the Add to cart*/

.woocommerce ul.products li.product .button {
	font-family: ETModules;
	border: 2px solid #0df1a5; /* button border color */
	color: #0df1a5; /* buttonicon color */
	font-size: 20px;
	padding: 4px!IMPORTANT;
	border-radius: 100px;
	height: 45px!important;
	width: 45px!important;
	text-align: center;
	transition: .3s ease;
}

/*Adding some Hover effect to buttons*/

.woocommerce ul.products li.product .button:hover {
	background: #0df1a5; /* button background color on hover */
	color: #fff; /* button icon color on hover */
	box-shadow: 0px 3px 20px #07B98A36;
}


/*Disables the icon appear when you hover to add to cart button*/

.woocommerce ul.products li.product .button:after {
	display: none
}