A button is an inline element and not a block level. So only using margin: 0 auto will not center align the button. To center a button, you have to block its display property and then auto margin to the left & right. See my CSS below. This is how to can center align a button using CSS. See the output in the screenshot below. And I had the following HTML for the button. To make a custom style, see how to style buttons with CSS. You will also get a couple of professional button examples on that post (including […]
Read More →
In HTML, you create a link using the anchor (<a>) tag. And you create a button using the <button> tag. There are some similarities between links & buttons, and that’s why it’s confusing to some of us. Also, there is some difference between these two. Otherwise, there is no reason to create these two separate HTML tags. And as a web designer, you should know the difference. So you can use the right tag at the right time. Links vs buttons I will discuss the difference between these two in detail. And some of them are opinionated. For now, see […]
Read More →
There is no href attribute for the div. So to make an entire div a link, you have to wrap it inside an anchor tag. See the example HTML below. In the above code, you see that I have a couple of HTML elements such as a heading, image & paragraph. All these elements live inside a <div>. And this whole div is wrapped by an anchor tag (<a>). This is how you can make a whole div a link. If you click anywhere in the div no matter if it’s a heading, image, paragraph, button, or something else, it […]
Read More →
You can deactivate links using the “pointer-events” CSS property. In this post, I will show you how to can disable a link on anchor tag (<a>), button, input, and CMS-based specific pages. How to disable a link? There are a couple of situations where you need this. Let’s explore them one by one. Disable link on HTML anchor tag This is how you can disable the click event for an anchor tag where you have the “HREF” attribute. Disable button link Deactivate links on input/submit Disable links on specific WordPress pages For example, you have a link that appears on […]
Read More →
There is no exact text-wrap CSS property but there are white-space & word-wrap that can make certain text wrap or show them in a single line. If this is not clear to you yet, see the examples and CSS below for more clarification. See their respective output below: word-wrap: normal ↓ The longest word in English pneumonoultramicroscopicsilicovolcanoconiosis default value word-wrap: break-word ↓ The longest word in English pneumonoultramicroscopicsilicovolcanoconiosis Allows long words to break in the next line word-wrap: initial ↓ The longest word in English pneumonoultramicroscopicsilicovolcanoconiosis This also comes from default value word-wrap: inherit ↓ The longest word in English […]
Read More →
To add a link in HTML, take an anchor tag <a> and insert the path into the “href” attribute. See the linking pattern below. In the above code, you see that I have 7 different linking examples. You will see all sorts of HTML linking methods step by step. Also, you’ll learn some new things about HTML links that you may have not seen before. Example 1 In the above example, you see how to create a link in HTML. The clickable text is known as anchor text as you see in “Example 1.” Example 2 In “Example 2“, you […]
Read More →
An HTML button is generally used to submit a form. However, you can create a button that works like a link. There are a couple of ways to make a button link. I mentioned them below. Add a link to the button using JavaScript Here the “onclick” is one of many JavaScript events. You can put any link between the single quotes. And by clicking the button, it will redirect you to the destination. Relative link path In the above example, it’s an absolute path. If you need to add a relative link path, use the following example below. Here […]
Read More →
By default, social media links in the Divi theme open in the same window. If you built a website with a Divi theme and added social icons/links to it, you’ll notice that they are not opening in a new tab. That means, if someone clicks any of the social links, the visitor is leaving your website. But if you want your visitors to open the social media links without leaving your website, you have to add a target=”_blank” to all the social media links. And you have to do it using JavaScript. How to open social media links in a […]
Read More →
If you created a static HTML web page and inserted links, they will open in the same window after you click any of them. This is the default behavior of any web browser. But if you want to open a link in a new tab, you have to specify _blank in the target attribute. In this post, I will show you how to do it and also discuss some other security concerns & their fixes. Let’s get started. How to open HTML links in a new tab? As I mentioned earlier, you need to specify _blank inside the target attribute. […]
Read More →
If you are looking for the best Google font pairs on your website, this post will help you to pick the right combinations. Also, I will show you the live preview of each pair. So you can imagine the look & feel of the font combination clearly. Why does the font pair matter? Every website has its own & unique way of elaborating on the subject matter. The exact same font does not convey the same level of comfort/weight on every type of website. For example, the font for a jock website should be different than a technology blog. A […]
Read More →