Master the WordPress Button Block: from Beginner to Expert

Рет қаралды 6,262

Күн бұрын

Learn how to create amazing buttons using WordPress's Button Block in the Gutenberg Editor.
👉 Get the CSS (and extra button styles) - www.buildthatwebsite.com/gute...
********************************
Video Chapters
********************************
0:00 - Intro
0:26 - Wordpress style controls for Button Blocks
3:52 - Adding a custom CSS Class to buttons
4:44 - Where to put CSS code
We'll start with the built-in styling options in the block editor. Learn how to add background colors and gradients as well as custom text colors. We'll also touch on button spacing, centering buttons on the page, adding border-radius and resizing buttons.
In the 2nd part of the video, I'll show you how to add CSS styles to your buttons, and combine CSS classes to add things like box-shadow, borders, border-radius and hover effects. We'll add simple animations using CSS transitions, and create multiple button styles.
There's also a neat trick to automatically create a color-change hover effect that works for (almost) any button color.

Пікірлер: 22

@valj137 Жыл бұрын

This is great! Thank you!

@rushx0099 Жыл бұрын

*thank you and have a good day that all :)*

@user-fi6ji3hc9n 3 ай бұрын

Hi pal. i like this video. its really clear and easy to apply. i have a question for you. how do a make a button that plays/ turns background music off and on on a website?

@WorldEnglishBlog 3 жыл бұрын

Good stuff again, thanks❗

@BuildThatWebsite 3 жыл бұрын

Thanks! I love what you're doing over on your channel. One suggestion for your website: the font-size is quite large on mobile devices, and I bet it's hurting your bounce rate and time-on-site for mobile visitors. Interestingly, you have a media query that increases the base font-size for small screens: @media (min-width: 480px) html { font-size: 24px; } But I'd actually suggest doing the opposite: @media screen and (max-width: 480px) { html { font-size: 16px } } And perhaps increasing your font-size a bit for larger screens. And please let me know if there are any tutorial topics you'd find useful!

@BuildThatWebsite 3 жыл бұрын

One more for ya. I love that you're using gutenberg blocks and groups. So many people are resisting the switch. @media screen and (max-width: 480px) { .wp-block-group.has-background { padding: 1.25em 1.25em; } } This will leave a little more room for your inner block group content on mobile screens. Keep up the awesome work!

@WorldEnglishBlog 3 жыл бұрын

@@BuildThatWebsite Thanks a lot for this. I have just started looking at CSS thanks to your tutorials but I haven't added any yet. The font size code must be automatic, but it's odd because as you say it doesn't look good on mobile. As a complete newbie can I just add the code you recommended with the smaller font size to Appearance -> Additional CSS or do I have to change the current code?

@BuildThatWebsite 3 жыл бұрын

I checked the source code of your site and my best guess is you're running X-theme as your theme. I've never used it, but I'm confident you get full control of your typography in the backend settings, and that's the best place to change this, rather than trying to override with CSS (which you CAN do if necessary). Here's a help doc that might be relevant: theme.co/forum/t/best-way-to-do-responsive-fonts/74086 But definitely see if the support team can help you out. It's always better to set things up correctly in your theme first before trying to override styles.

@WorldEnglishBlog 3 жыл бұрын

@@BuildThatWebsite Thanks for this Matt. You're right, I'm using X-theme. I went to Theme options -> Typography and I switched from Stepped to Scaling. This seems to have done the trick. It was super simple to fix, thanks for bringing it to my attention.

@chrisnicol8175 Жыл бұрын

Thanks for this, really good intro into those extra custom tools. One question, how do I change the colour of the background behind the button? I don't want it to be the default white, I want to change the colour of the button block.

@BuildThatWebsite Жыл бұрын

You would use the .wp-block-buttons selector, and give it a background color with CSS. The easier method is to use GenerateBlocks, which is a completely free (and lightweight) plugin. It will let you customize many aspects of the built-in button block including padding/margin and background color.

@srrywrongname57 3 жыл бұрын

I want to make a button that is basically almost a sqaure with 0 radius on left,top,bottom but on the right i want it to be closed in an arrow shape. How can i do it and put in elementor ppl say add btn triangle but im not good with css

@BuildThatWebsite 3 жыл бұрын

You either need to us CSS triangles in a pseudo-element, or you could create a transparent PNG image and use it as the button background. Either way, you're going to need some CSS. There are free CSS triangle generators online that are very helpful: triangle.designyourcode.io/

@user-l9v7xff567 Жыл бұрын

Do I have to put the same code again to rewrite the created button in a new place?

@BuildThatWebsite Жыл бұрын

No, if it's all on the same page you can just insert the css once. And if you want to use the button on multiple pages, just put the code in you sitewide css