- 67
- 299 730
CSS Express
Czechia
เข้าร่วมเมื่อ 20 พ.ค. 2020
Quick tips and tutorials for CSS and Elementor aimed at designers and non coders. Some tutorials are using Elementor unpaid (FREE) version, while some are using the features from the Pro version. Each week there will be new videos covering specific and straightforward problems and solutions and how to achieve more creative look and elements in Elementor with just a few simple lines of custom CSS code.
------------------------------
This channel may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
------------------------------
This channel may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
Turn text link from HTML into a button using CSS | CSS Tutorials and CSS Lessons for Beginners
This simple and short tutorial will show you on a practical example how to turn a default text link from HTML into a nice looking button using CSS.
A button is nothing more than a simple text link that's styled to look like a button. We will style the buttons and links to apply some background color, change the color and the size of our text, give it some rounded corners using border radius property and in no time we will have a nice, custom looking button instead of a default, not so nice looking text link from HTML.
You do not need to know HTML! Just a few lines of CSS.
This exercise is part of our online course CSS Basics for beginners, designers and non-coders that includes more than 50 hands on exercises like the one shown in the video.
💻 If you would like to learn more and get access to the full course and interactive CSS exercises to try them yourself, check our website:
www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
------------------------------
MUSIC:
Switch It Up - Silent Partner th-cam.com/video/r_HRbXhOir8/w-d-xo.html
A button is nothing more than a simple text link that's styled to look like a button. We will style the buttons and links to apply some background color, change the color and the size of our text, give it some rounded corners using border radius property and in no time we will have a nice, custom looking button instead of a default, not so nice looking text link from HTML.
You do not need to know HTML! Just a few lines of CSS.
This exercise is part of our online course CSS Basics for beginners, designers and non-coders that includes more than 50 hands on exercises like the one shown in the video.
💻 If you would like to learn more and get access to the full course and interactive CSS exercises to try them yourself, check our website:
www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
------------------------------
MUSIC:
Switch It Up - Silent Partner th-cam.com/video/r_HRbXhOir8/w-d-xo.html
มุมมอง: 28
วีดีโอ
CSS course: How a CSS line looks like | CSS Basics for beginners, designers and non-coders: Lesson 3
มุมมอง 292 หลายเดือนก่อน
This video is part of our online course CSS Basics for beginners, designers and non-coders. In the series of videos, we will cover different topics about CSS and this lesson will show you how a basic line of CSS looks like, what are the elements and how you call out a class in CSS, how you open and close the class and the code and much more. We will see how to define a property and assign a val...
CSS course: Basic terminology in CSS | CSS Basics for beginners, designers and non-coders: Lesson 2
มุมมอง 202 หลายเดือนก่อน
This video is part of our online course CSS Basics for beginners, designers and non-coders. In the series of videos, we will cover different topics about CSS and this lesson will introduce you to basic terminology in CSS. We will see what CSS classes are, IDs, selectors, paddings and margins, pseudoelements and pseudoclasses and much more. All in simple language, no technical terms and with vis...
CSS course: Introduction to CSS | CSS Basics for beginners, designers and non-coders: Lesson 1
มุมมอง 6K2 หลายเดือนก่อน
This video is part of our online course CSS Basics for beginners, designers and non-coders. In the series of videos, we will cover different topics about CSS and this first lesson will introduce you to CSS and it will explain you what CSS is, when it is used and what is the main difference between HTML and CSS. 💻 If you would like to learn more and get access to the full course and interactive ...
CSS Basics online course for beginners, designers and non-coders | Course Intro
มุมมอง 3802 หลายเดือนก่อน
Our beginner course, CSS Basics, is focusing on practice and is aimed specifically at the beginners, without any coding experience, designers and non-coders. In this course, you will learn the basics of CSS without complicated technical talk, through simple language, visual explanations and short lessons and a more than 50 interactive hands-on custom exercises, not just the theory. The course i...
How to highlight the current post in the current category post list in Elementor
มุมมอง 1654 หลายเดือนก่อน
This tutorial will teach you how to filter the posts in the list using the current post category. That way your post list will display ONLY the posts of the same category as the one that you are currently viewing. Then, we will include the current post in that list. That's something that is missing in the 'Related Posts' widget in Elementor! And lastly, we will highlight that current post in th...
Zoom image effect on hover using Elementor and CSS | Scale image up within the box upon mouse hover
มุมมอง 2.5K4 หลายเดือนก่อน
This tutorial will teach you how to create a smooth zoom image effect on hover using Elemntor and CSS. First, we are using an image widget in Elementor to place our image and we will assign a pixel width to the section that contains the image. Then we will define the hover state of our image using the transform property to scale our image up. We will adjust the transition of our image to create...
Custom Step 1,2,3 ordered lists in Elementor and CSS | How to add custom words to ordered lists
มุมมอง 1444 หลายเดือนก่อน
In this tutorial, you will learn how to create custom ordered lists in Elementor and CSS and add custom words before the numbers 1,2,3 in your list. That way you can create the list that has 'Step 1', 'Step 2', 'Step 3' instead of just 1, 2, 3 markers. This 'Step' word can be changed to whatever word or words of your choice. We will be using and styling the ::marker of our list, add the content...
Direct checkout in WooCommerce & Elementor (skip the cart page) | Simple, NO PLUGINS, just free PHP
มุมมอง 1.8K8 หลายเดือนก่อน
This simple tutorial will teach you how to skip the cart page in WooCommerce and Elementor and create a direct checkout process in your WooCommerce store in Wordpress. That way, you can create a faster purchasing process for your customers and increase the sales and conversions on your Wordpress website. After clicking the 'Purchase', 'Buy' or 'Add to cart' button, your customers will now be re...
Change font color of certain repeated words in JS and Elementor | Target & style specific words
มุมมอง 2608 หลายเดือนก่อน
This short and easy tutorial will teach you how to color all instances of certain words in text using Javascript (JS) and Elementor in Wordpress. Imagine that you want to give red color to all the words 'red' that appear in your text on your website or your webpage. And that you have 100 instances or that word. You can change the font color and the style of specific repeated words or string of ...
Vertically center bullets with long text in CSS and Elementor | How to align bullets with list items
มุมมอง 5608 หลายเดือนก่อน
In this tutorial, I will show you how to vertically center and align bullets with text in CSS in Elementor using unordered lists. If you have a list item that contains a lot of text and has multiple lines, the default bullet might still be aligned to the top of the list item. If you want to make it centrally aligned with your text, you can first clear the list style. This will remove the defaul...
Make text tables in Elementor using CSS only | No plugins, no HTML
มุมมอง 1.1K8 หลายเดือนก่อน
In this tutorial, we are creating tables in Elementor with CSS only. No need to install a plugin, no HTML. Just simple, plain text using Text editor widget, unordered lists and some CSS. First, we will style the unordered (bullet) list that creates each column of our table. We will remove the bullets, add padding and spacing and text alignment. We can then apply shading to our table rows and ro...
How to style form fields in Elementor with CSS | Customize the look of Elementor forms
มุมมอง 3K10 หลายเดือนก่อน
This tutorial will teach you how to customize Elementor forms in Wordpress using CSS. You can style the form input fields, such as name, surname, email or a text field, change their borders and colors, round the corners, customize the fonts and much more. 🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. PURCH...
Style radio and checkmark field box in CSS and Elementor forms with custom icons | Part 2
มุมมอง 1K10 หลายเดือนก่อน
In this tutorial, we are continuing with styling and customizing radio boxes using Elementor forms and CSS. You will learn how to add an icon from Font Awesome or a completely custom SVG icon uploaded to your Wordpress library. This way, you can completely customize how a radio box field looks like when it is checked (or clicked on) and appear with a custom icon. First, we will hide the default...
How to style radio and checkmark field box in CSS and Elementor forms | Custom radio boxes | Part 1
มุมมอง 2.2K10 หลายเดือนก่อน
In this tutorial, you will learn how to style radio (or checkmark) boxes in Elementor forms using CSS. The difference between a radio box and a checkmark box is that with radio field, you can only select one option from the list, while the checkmark field enables you to select multiple choices. Using CSS, you can easily change the size, border color or thickness, border radius, color etc. First...
Add a custom icon to the file upload button in Elementor forms and CSS before or after the text
มุมมอง 1.3K10 หลายเดือนก่อน
Add a custom icon to the file upload button in Elementor forms and CSS before or after the text
Change the text for the file upload button and label | Edit and customize Elementor forms with CSS
มุมมอง 3K10 หลายเดือนก่อน
Change the text for the file upload button and label | Edit and customize Elementor forms with CSS
How to change the color or remove the 'No file chosen' label | File upload Elementor forms and CSS
มุมมอง 1.8K10 หลายเดือนก่อน
How to change the color or remove the 'No file chosen' label | File upload Elementor forms and CSS
Style the file upload button in Elementor forms and CSS | How to make the 'Choose file' button nicer
มุมมอง 10K10 หลายเดือนก่อน
Style the file upload button in Elementor forms and CSS | How to make the 'Choose file' button nicer
Center the content on a page in CSS and Elementor | How to put objects in the middle of a page
มุมมอง 1K10 หลายเดือนก่อน
Center the content on a page in CSS and Elementor | How to put objects in the middle of a page
How to make Barbie 3D Text effect in Photoshop | Editable Pink Gloss Text PSD Tutorial
มุมมอง 4.3Kปีที่แล้ว
How to make Barbie 3D Text effect in Photoshop | Editable Pink Gloss Text PSD Tutorial
How to create custom image masks with text layers in Elementor and CSS | Knockout text effect
มุมมอง 2.2Kปีที่แล้ว
How to create custom image masks with text layers in Elementor and CSS | Knockout text effect
How to create custom image masks with linear gradients in Elementor and CSS | Fading image effect
มุมมอง 6Kปีที่แล้ว
How to create custom image masks with linear gradients in Elementor and CSS | Fading image effect
How to create custom image masks with PNG layers in CSS and Elementor | Put images in custom shapes
มุมมอง 511ปีที่แล้ว
How to create custom image masks with PNG layers in CSS and Elementor | Put images in custom shapes
How to put images in semi circle and quarter circle in CSS and Elementor using aspect ratio
มุมมอง 1.2Kปีที่แล้ว
How to put images in semi circle and quarter circle in CSS and Elementor using aspect ratio
Create tabs with custom design in Elementor | Make tabs with custom layouts with Anywhere Elementor
มุมมอง 13Kปีที่แล้ว
Create tabs with custom design in Elementor | Make tabs with custom layouts with Anywhere Elementor
How to enable vector SVG file uploads in Elementor | Safe SVG plugin for Wordpress websites
มุมมอง 2.5Kปีที่แล้ว
How to enable vector SVG file uploads in Elementor | Safe SVG plugin for Wordpress websites
How to import Google fonts in CSS | Use non-standard web fonts on Elementor websites
มุมมอง 1.3Kปีที่แล้ว
How to import Google fonts in CSS | Use non-standard web fonts on Elementor websites
Create custom graphics above titles in CSS and Elementor | Headings with custom vectors above them
มุมมอง 407ปีที่แล้ว
Create custom graphics above titles in CSS and Elementor | Headings with custom vectors above them
How to create an ordered list with numbers in circles in CSS and Elementor
มุมมอง 2.4Kปีที่แล้ว
How to create an ordered list with numbers in circles in CSS and Elementor
This is fine, but containers are the more flexible option.
Thank you so much, you're a life saver👏
You're welcome!
Thanks so much! This video helped out a lot! :)
You're welcome! :)
Do you do hourly rates to do some fixes on a project? I like your style
Hi! I do - feel free to reach out on expresscsstuts@gmail.com and let me know the details! :)
You make great videos. Thank you. How can I style the Site Reviews Plugin form with CSS? Thank you.
Hi, thanks for watching! Let me make a quick tutorial on how to do that - keep an eye on the update in a day or so!
@@cssexpresstutorials Hi! How are you? Did you post an update on it? Thank you so much!
Great tutorial, thanks!
You're welcome, I'm glad it helped! :)
Thank you!!
Thank you so much!
You're welcome! :)
Is there any advanced course too
Unfortunately not yet, but planning to make one on animations, transitions and more advanced techniques :) The current one covers some advanced topics with the basic elements but it's mainly to start with the beginner's level :) If there are any specific topics you are interested in, feel free to reach out and let me know and I can either make a free tutorial or incorporate that in the course!
That is exactly what I wanted.
Glad it worked for you!
thank you so much!
You are welcome! :)
hello If I buy your course, can I request a specific answer to a problem through video(web related)?
Hi, feel free to write me on this channel or through the course page and make sure to include the details of what you need and I will get back to you shortly :)
Thanks!
Thank you! Simple and very useful 🫶🏻
You're welcome! :)
Do you also have a option to add a hover with the css code?
Nice. What about image magnify. How do you do that...to show a little magnifier on image when you hover on it
Hi there, I don't know if you still check this comment section, but I lose nothing trying haha. I tried using the selectors you used on your video but they don't work for me. It does work when I use the .elementor-field-type-upload input[type="file"] selector but it takes the button and the label as a whole. I found in other website the .elementor-upload-field selector which allows me to style only the label but not the button. I tried using the plugin you recommended and the CSS Custom Code section of my widget.
Hi! Can you send over the entire code you are using for the .elementor-field-type-upload input[type="file"] class? And the Elementor version you are using? If you have a link to the website where I can examine this in Inspect Elements, that would be the best - you could send me an email
thank you!
Someone knows how to do this with Pro Elements?
in my case links are not opening😭
Loved this video - thank you! For those of us who are using Elementor Pro in 2024, the CSS code shown on Velvetmade doesn't work well (I was only able to produce one circle on my first list), but not to worry! I incorporated the CSS code shown in this video into the Custom CSS section in the 'Advanced' tab, and it worked virtually straightaway, albeit with a few refinements. What I really like about creating it in the Custom CSS area is that you can work with the code (and refinements) interactively - in real time!
Thank you!
Useful tip! But the problem is that Download as PDF messes up with my text formatting in the file while Save as PDF / Print to PDF doesn't!
🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. 💻 Grab the PHP code for free here: www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/
🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. 💻 Grab the CSS code for free here: www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/
Recommend ❤
Unfortunate when I set font-size to 0 the choose file button height collapses. Dunno why. To solve this I have to double the vertical padding. What browser are you using? I have Chrome.
LIFE SAVOR!!!! THANK YOUUUUUUUUUUUU
You're welcome! 🤗
How would I make the radio options in the same line, Ive tried a lot of inline css options but cant get it to work
Hi! Try using this below: .elementor-field-option{ display: inline-block !important; flex-basis: auto !important; } .elementor-field-subgroup { display: flex !important; column-gap: 20px !important; } Or if you are using Elementor forms, in the radio form field settings, you should be able to use the toggle for 'Inline List'. It should be just below the 'Options' field in the radio form field settings. Let me know if this helps!
not work
Hi! Can you share more about the code that you are using and what's not working? Otherwise I won't be able to assist you. You can also send screenshots or a link to my email and I'll take a look
Hi! I have four tabs on a single page. In the menu bar, there are sub-menu options and tabs name are some. How can I set it up so that clicking on a sub-menu redirects to the corresponding tab?
It was very very helpful
Happy to help! :)
how to make remove uploaded file button ?
mam it is not working even after setting them both inline 🥺
Hi! Since Elementor changed and introduced flexbox, this might not be the current setup needed anymore. Can you share the link or send me an email so that I can help? Feel free to include the screenshots or a link and I will take a look :)
@@cssexpresstutorials congrats you got a new subscriber 😁😁😁i'm learning wordpress i'll ask you all needed as a student 🥹🥹🥹
Great I didn't know about that css, js and html plugin, awesome
Wording good
I am running elementor pro and it already stores all of the form submissions info. You dont need a seperate plug in. Do you know this or are you just trying to promote an extra plug in.
The best video of the lot on this topic. Thanks!
Thanks a lot for watching! 🤗
thank you so much for this video! it was exactly what i was looking for!!!
You are welcome! :)
the break-before: column is not supported on Firefox browser
This is exactly what i was looking for.. thank you very much.. i wish you all the success! 😊
Thanks for watching! ☺
thank youuuu
You're welcome! :)
Great video, It was very helpful, it saved a lot of time, Thank you?
You're welcome! :)
Not Working for me
Excellent. Subscribed.
Thank you so much for going straight to the point, it worked!
Nope, this no longer works.
Congratulations on the video, I wanted to ask if possible for a video with the theme: As there are categories with different colors in an item loop, that is, just the customized term of the category name with ACF with different colors in a single loop item, is it possible ?
Thanks..
hint for all of you who only wanted to change the radio circles and leave check boxes as they are: add "[type="radio"] at "/* This adds the custom radio box circles for unchecked and checked states */. Otherwise it will add a radio circle next to checkboxes
and thanks for the tutorial! :)
thanks
You're welcome!
Muchas gracias !!!