[Resolved] button shape color

[Karlis]

Hi guys,
Is it possible to create a specific button in whole web ?
I mean shape, color and transparent button.
Regards

[Tom]

Hi there,

Here’s something I like to do:

button.ghost, 
html input[type="button"].ghost, input[type="reset"].ghost, input[type="submit"].ghost, a.button.ghost, 
a.button.ghost:visited, 
a.wp-block-button__link.ghost:not(.has-background) {
	background: transparent;
	color: inherit;
	border-color: inherit;
}

button.ghost:hover, 
html input[type="button"].ghost:hover, input[type="reset"].ghost:hover, input[type="submit"].ghost:hover, a.button.ghost:hover, 
a.wp-block-button__link.ghost:not(.has-background):hover {
	background: transparent;
	color: #1e73be;
}

This allows you to use this markup when creating your buttons:

<a class="button ghost" href="YOUR LINK">My button</a>

If you don’t want to have to add the ghost class to the button, you can do this:

button, 
html input[type="button"], 
input[type="reset"], 
input[type="submit"], 
a.button, 
a.button:visited, 
a.wp-block-button__link:not(.has-background) {
	background: transparent;
	color: inherit;
	border-color: inherit;
}

button:hover, 
html input[type="button"]:hover, 
input[type="reset"]:hover, 
input[type="submit"]:hover, 
a.button:hover, 
a.wp-block-button__link:not(.has-background):hover {
	background: transparent;
	color: #1e73be;
}

[Karlis]

Hi, Tom!
Thanks for an advice! It really works.

[Tom]

Glad I could help! 🙂

[John Austria]

Hi,

Trying to use this, but I can’t make the size of the button bigger. Also, how do I change the font size?

JG

[Leo]

Can you open a new topic for your question?

Thanks 🙂

[Ying]

Hi John,

Generally you can add some padding to the button link a with CSS: padding: 20px 10px; to make it bigger ,try adjust the numbers.

and CSS: font-size: 30px; to the link a.

If you are not sure where to add the CSS, any chance you can link us to the site in question? You can use the private information field.

Let me know 🙂

[Author]

Posts