CSS for Buttons in Block Editor
-
Hello,
I have created CSS for a button under the old editor but when I create a button in the new editor and assign the name to the “Additional CSS classes” the CSS appears behind the block editor button. I have removed the period before the name ie name is “buttoncp3”.Can you please confirm that specific CSS can be assigned to the new block editor buttons? and what else I might need to do?
The blog I need help with is: (visible only to logged in users)
-
Hello there Darren,
Yes, it is possible to style block editor buttons with CSS. Can you please tell me what button you are trying to add CSS to on the blog? Can you also please share the CSS you are trying to add, and how you are adding it.
Additionally, the Gutenberg button block has some great customizable options right from the editor. You have full control over all the colors, border-radius and more. So if you just want to change those I recommend you use the editor to do so.
-
Hi Luanluta. I hope you will be doing great. I wana ask you a question regarding CSS. I just saw a website Read light novels and it has created few blocks. Like each block for each book and when we clcik on a certain block it redirects us to some other page. How can I make these blocks of books with images and clickable too ?
-
-
-
The button is the block editor button listed as class “wp-block-button”.
The CSS that I am using is:
.buttoncp3 {
height: 25px;
width: 230px;
background-color: #ed6432;
border-radius: 10px;
text-align: center;
padding: 0px;
}
.buttoncp3:hover {
background-color: #4CAF50; /* Green */
}I wanted to change the dimensions of the button and have a hover over colour.
-
Hi @darren740 – Thanks for sharing the CSS you’re using. Do you have a working example on your site somewhere that we could look at with you and see what you are seeing? Perhaps a page or post, it could be published or a draft.
-
Hi Dean,
Thank you for replying.I may have made a mistake in asking the question in this forum. Since asking I am now not sure if this forum is only for websites that are hosted by wordpress.com. If that is true, you may not be able to help me as my website is hosted elsewhere. If you only help wordpress.com hosted websites can you please confirm? Sorry for any inconvenience caused.
-
Hi there,
Since asking I am now not sure if this forum is only for websites that are hosted by wordpress.com. If that is true, you may not be able to help me as my website is hosted elsewhere. If you only help wordpress.com hosted websites can you please confirm?
That is correct. It sounds like you are referring to a self-hosted WordPress site, which are sites that you create on a “traditional web host” like Bluehost, GoDaddy, etc.
Those kinds of sites use a different version of the WordPress platform from what we offer here on our fully managed cloud-based service. Instead you will want to ask for help here for most general WordPress questions involving your site: https://wordpress.org/support/forums/
Hope this helps point you in the right direction!
-
- The topic ‘CSS for Buttons in Block Editor’ is closed to new replies.
WordPress.com Forums 