round button

[Mar21]

Hello!

is it possible to create round button like in my screenshot ?

I have tried this, but it was not compatible with your buttons

.round-bouton {
	width:85px;
	height:85px;
	background:#cc0000;
	font:bold 13px Arial;
	border-radius:50%;
	border:none;
	color:#fff;
}

thanks

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

You would need to use this html:

<a href="yourlink" class="round-button">Join Us</a>

– Kyle

[Mar21]

Thanks Kyle,

that was I have done, but I have a problem with :
– he text in the button
– the button color (mix of the accent button and the custom color)
– the button center alignment (not working)

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

What’s your link? I’ll have a look

– Kyle

[Mar21]

This reply has been marked as private.

[Kyle – SUPPORT]

You’ve used the button shortcode, just use a normal text link but use this html:

<a href="yourlink" class="round-button">Join Us</a>

– Kyle

[Mar21]

Thnaks, but it’s not yet good (cf. screenshot)

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Use this CSS:

.round-button {
  background: #cc0000 none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  display: block;
  font: bold 13px Arial;
  height: 155px;
  padding: 70px 10px;
  width: 155px;
}

– Kyle

[Mar21]

Thanks a lot Kyle,
it works now. But I can’t use the text align-center or text-align-right option

[Kyle – SUPPORT]

The text will be central

– Kyle

[Mar21]

Yes it is, thank you. But how can be the button central too?

[Kyle – SUPPORT]

Sure, change the css to:

.round-button {
  background: #b7197a none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  display: block;
  font: bold 13px Arial;
  height: 155px;
  padding: 70px 10px;
  width: 155px;
  margin: 0 auto;
}

– Kyle

[Mar21]

thank your very much! It’s great!!!

[Kyle – SUPPORT]

No problem!

– Kyle