Align Button to bottom

Hello Mac,

The best way to customize CodeLights elements is to use special classes that will be connected with the customizations. In this case let’s add ‘btn_bottom’ class to the element (Custom > Extra class name).

And after that I would use something like this to make its back button stick to bottom:

.cl-flipbox.btn_bottom .cl-flipbox-back-h {
	padding-bottom: 40px; /* button overall height */
}
.cl-flipbox.btn_bottom .cl-btn {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
}

It’s not a ready recipe, use it as a blank to make your own customization with the details you need.

Please let me know if it actually helped you!

Hello once again,

It’s been a while since my last answer. I guess, it helped, so I’m closing the topic. In case you need any further assistance, just write your replies below.

Hey Ruslan sorry I didn’t reply before.

I loved your css and it worked like a charm. There’s only one thing which I wanted to ask just because I’m a little OCD. The button once aligned to the bottom takes the width of the flip box. I tried changing the code myself to keep the button centered and with the adaptive size as it was before. If this can’t be done, its ok. I still REALLY love how the button looks aligned to the bottom.

Thanks.

MAC

Hey Mac,

This question is connected with the CSS itself rather than the CodeLights plugin, so I recommend to check one of the relevant pages over the web, like this one: https://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div

The new version is coming soon! Stay in touch! And if you enjoy the plugin, please rate it ★★★★★!