How to make a rectangular button and place it vertically?

prashanthkp4

Hi,

I just bought the plugin and do not know a thing about it.
I want to make a button that stays on the right side of the hero image. This button will be rectangular with the text "Enquire Now". The button will be vertical as in the text is rotated 90 degrees. And when the user hovers on it, it should display a contact form. Can this be done? If yes, can you please guide me how?

JonasT

Hi,

Welcome to the community!

1. Button that stays on the right side of the hero image
You can go to the settings of the group buttons, and open the Position container underneath the General tab. With this functionality you can determine very precisely the position of your button on the page and you can place it right next to the hero image.

2. Rectangular button with the text "Enquire Now"

3. Button will be vertical as in the text is rotated 90 degrees
Unfortunately you can not place a button with text vertically. What you can do is go to the Customer CSS Editor and add the following piece of code to get the button and text vertical. I'm sending a screenshot to clarify it.

Screenshot:
Go the settings of the button or group and open the Custom ID & Custom Class container underneath the Advanced tab.

Code:

.buttonizer-button {
  transform: rotate(-90deg)!important;
}
.buttonizer-button i {
  transform: rotate(90deg) translate(-50%, 50%)!important;
}

4. Display a contact form
Creating a contact form is unfortunately not yet possible, but definitely something for the future. What you can do is create a contact form with Elementor Popups or another popup plugin and display that popup with Buttonizer

Let us know if you have more questions.

Jonas

prashanthkp4

Hi,

Thanks for the reply. I cannot find the option "Place inside button" for the label. So when I add the customer CSS only the icon is rotating and not the text.
My version of of buttoner does not have it I guess.

JonasT

Hi,

Thanks for for your response!

We went live yesterday with a new update (2.6.0). If you update to this version you will see this functionality. You can update by going to your WP dashboard.

If you want to put the label inside the button you have to go to the group settings and not the button settings, you cannot find it there 🙂.

You can use this piece of code to rotate the button with the text vertically:

.buttonizer-button {
    transform: rotate(-90deg) !important;
}

I hope this helps.

Jonas

prashanthkp4

Thanks, its working now. But there is one more issue. When I place the text inside, the whole button is now shifted.

JonasT

Hi,

Thanks for your response!

Can you go to the Customer CSS Editor and insert this piece of code:

.buttonizer-group { transform: rotate(-90deg) translate(0%, 60%) !important; }

Let me know if this helps.

Cheers,

Jonas

Jasper

Exiting news, today we've deployed built-in transform tools! You can now use them inside the editor 🚀

If you have any feedback, make sure to let us know! 🔥