Call to Action button

Hi,

Thank you for your support so far already. :slight_smile:
I have another question about the call to action buttons.

It’s on this page:
http://hollandprivatetour.com/wordpress/projects/3-day-grand-holland-private-tour/

I like the CSS to be like the “Send” button, as below on the page. Filled green with white text. And on hover green text with white background and green line.

Where can I change that?

I also prefer to position the button within the text between ‘Highlights’ and ‘Intinerary’. How can I do this?

Thanks again!

Stefka

Hello there,

Thank you for asking.

> … on hover green text with white background and green line.

Try to add the following CSS code through the Simple Custom CSS plugin. Once this plugin installed, go to Appearance > Custom CSS. Then insert the following.

.button-slider:hover{
  background: #fff;
}

> I also prefer to position the button within the text between ‘Highlights’ and ‘Intinerary

In order to achieve this objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go to Settings > Header and Footer Scripts panel
  3. Paste the following code into the “Scripts in footer:”
<script>
;(function($) {

   'use strict'

   var slideBtn = $('.button-slider');
   
   $( ".slide-text .maintitle" ).after(slideBtn);

})(jQuery);  
</script>
  1. Save settings

  2. Go to Appearance > Custom CSS. Then insert the following CSS code.

.text-slider .maintitle{
  display: block;
}

.text-slider .button-slider{
  margin-top: 30px;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Hello Kharis,

Thank you for getting back so quickly.
Installed Simple Custom CSS.
When I add:
.button-slider:hover{
background: #fff;
}

It changes the button on the front page, giving it a white background color.
That’s not what I’m looking for.

http://hollandprivatetour.com/wordpress/projects/delft-the-hague-rotterdam-private-tour/
I think it’s a different CSS button.
The one I like to change now shows with grey tekst, white bg and green borderline. I want it to be like the ‘Send’ button at the same page below.

I do not want the button in the header or footer. But in the text field of the Project. To give you an idea I have put an image there :wink:

Kind regards,

Stefka

Hello there,

I would like to apologize in advance my mislead. As an alternative, try to use the <a> tag with the following format.

<a href="http://#" class="roll-button more-button">Text</a>

To make it works, your post editor should be in text mode.

Let me know how it works for you.

Warmest regards,
Kharis

That’s it! Thank you.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

I’m happy to have an opportunity to assist you.

Warmest regards,
Kharis