How to Make Your <a> Tags and <button>s Look Much Better in Just a Few Lines of Code
Tags: css, frontend, webdev, beginners
Published: 2022-09-27 06:29:51

<span style="font-weight: 400;">If you do any front-end development work at all, you’re going to have to work with user interaction. That means working with a user’s inputs, and a lot of these inputs are going to involve the use of buttons.</span>

<span style="font-weight: 400;">But</span> <b>&lt;a&gt;</b> <span style="font-weight: 400;">tags and </span><b>&lt;button&gt;</b><span style="font-weight: 400;"> tags can be pretty plain and ugly looking. That’s why in this tutorial, I’m going to show you how you can make your buttons look much better than the default styles given by the browser.</span>

<span style="font-weight: 400;">I’m going to cover styling </span><b>&lt;a&gt;</b><span style="font-weight: 400;"> tags as well as </span><b>&lt;button&gt;</b><span style="font-weight: 400;"> tags since that’s what you’ll be using when you are working on the front-end. </span>

<span style="font-weight: 400;">I want to make a quick note here: you should make sure you are using </span><b>&lt;a&gt;</b><span style="font-weight: 400;"> tags and </span><b>&lt;button&gt;</b><span style="font-weight: 400;"> tags for your interactive elements instead of just styling </span><b>&lt;div&gt;</b><span style="font-weight: 400;"> elements.</span>

<span style="font-weight: 400;">Why?</span>

<span style="font-weight: 400;">The biggest reason is accessibility. Screen readers and keyboard controls will understand these tags as interactive. </span><b>&lt;div&gt;</b><span style="font-weight: 400;"> tags, not so much. Also, correctly using </span><b>&lt;a&gt;</b><span style="font-weight: 400;"> tags will help your website’s SEO.</span>

<span style="font-weight: 400;">Let’s get started.</span>
<h2><span style="font-weight: 400;">Setting up the project</span></h2>
<span style="font-weight: 400;">This is pretty boilerplate stuff, so feel free to skip this step that involves setting up the project if you know how to set up an HTML and basic CSS file.</span>

<span style="font-weight: 400;">As with many front-end projects, you’re going to start out by creating an </span><span style="font-weight: 400;">index</span><span style="font-weight: 400;">.html</span><span style="font-weight: 400;"> file. I’m using </span><a href="https://docs.google.com/document/d/1MEhOPtJhKfTCVjZygytwdG0WjhLUrtVIxS0qBbqPUJ0/edit#"><span style="font-weight: 400;">Visual Studio Code</span></a><span style="font-weight: 400;"> as my editor with </span><a href="https://docs.google.com/document/d/1MEhOPtJhKfTCVjZygytwdG0WjhLUrtVIxS0qBbqPUJ0/edit#"><span style="font-weight: 400;">Emmet</span></a><span style="font-weight: 400;">. This allows you to type an </span><strong>!</strong><span style="font-weight: 400;"> and it fills in the typical HTML that occurs on pretty much all pages.</span>

<img class="hoverZoomLink aligncenter wp-image-214 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/VS-Code-emmet-html.png" alt="VS Code emmet html" width="1496" height="384" />

<span style="font-weight: 400;"> </span>

<span style="font-weight: 400;">Create a </span><strong>style.css</strong><span style="font-weight: 400;"> file, link it to your </span><span style="font-weight: 400;">index</span><span style="font-weight: 400;">.html</span><span style="font-weight: 400;"> file and change the title of the page.</span>
<pre><span style="font-weight: 400;">&lt;!</span><span style="font-weight: 400;">DOCTYPE</span> <span style="font-weight: 400;">html</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">html</span> <span style="font-weight: 400;">lang</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"en"</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">head</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">meta</span> <span style="font-weight: 400;">charset</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"UTF-8"</span> <span style="font-weight: 400;">/&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">meta</span> <span style="font-weight: 400;">http-equiv</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"X-UA-Compatible"</span> <span style="font-weight: 400;">content</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"IE=edge"</span> <span style="font-weight: 400;">/&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">meta</span> <span style="font-weight: 400;">name</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"viewport"</span> <span style="font-weight: 400;">content</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"width=device-width, initial-scale=1.0"</span> <span style="font-weight: 400;">/&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">link</span> <span style="font-weight: 400;">rel</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"stylesheet"</span> <span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"styles.css"</span> <span style="font-weight: 400;">/&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">title</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">Making Beautiful Buttons</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">title</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">head</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">body</span><span style="font-weight: 400;">&gt;&lt;/</span><span style="font-weight: 400;">body</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">html</span><span style="font-weight: 400;">&gt;</span></pre>
<span style="font-weight: 400;">Now, you need to write the HTML for the button. Starting from here, all HTML code is going to go in between your </span><strong>&lt;body&gt;</strong><span style="font-weight: 400;"> tags. I’m going to omit them to save space since you won’t be changing anything besides what’s in your </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">body</span><span style="font-weight: 400;">&gt;.</span>
<h2><span style="font-weight: 400;">Making your first button</span></h2>
<span style="font-weight: 400;">In this tutorial, I am wrapping my buttons in a </span><strong>.button-container</strong> <b>&lt;div&gt;</b><span style="font-weight: 400;">. I’m only doing this so it’s easier to see and take screenshots. I’m also putting the class or tag name below the button in a </span><b>&lt;p&gt;</b><span style="font-weight: 400;"> tag, so we can see what we're working with when we open up our </span><span style="font-weight: 400;">index</span><span style="font-weight: 400;">.html</span><span style="font-weight: 400;"> with a browser. In your app, you don’t need to have this </span><span style="font-weight: 400;">.</span><span style="font-weight: 400;">button</span><span style="font-weight: 400;">-</span><span style="font-weight: 400;">container</span> <b>&lt;div&gt;</b><span style="font-weight: 400;">; however, your button will probably have some kind of parent wrapped around it.</span>

<span style="font-weight: 400;">Also, in your application, you are probably going to have some event tied to your button. Maybe you are directing the user to a different part of your webpage, maybe they are directed to a whole new page, or maybe you are stopping the default behavior with javascript by using </span><span style="font-weight: 400;">event</span><span style="font-weight: 400;">.preventDefault()</span><span style="font-weight: 400;">. </span>

<span style="font-weight: 400;">This tutorial only focuses on styling the buttons, so every time we click a button the page will just reload. The </span><strong>#</strong><span style="font-weight: 400;"> symbol in </span><strong>&lt;a href="#" class="btn"&gt;</strong><span style="font-weight: 400;"> is often used as a placeholder for a link or for when we don’t want the link to go anywhere.</span>
<pre><span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">div</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"button-container"</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">a</span> <span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"#"</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"btn"</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">Click me</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">a</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">div</span><span style="font-weight: 400;">&gt;</span></pre>
<span style="font-weight: 400;">I put a little bit of styling on the </span><strong>.button-container</strong><span style="font-weight: 400;">, just to make these a bit more clear.</span>
<pre><span style="font-weight: 400;">.button-container</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">1px</span> <span style="font-weight: 400;">solid</span> <span style="font-weight: 400;">black</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-align</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">center</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<img class="hoverZoomLink aligncenter wp-image-213 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/css-button-no-style.png" alt="css button no style" width="1416" height="242" />

<span style="font-weight: 400;">First, get rid of that ugly purple color and underline that is given to us by default. </span>
<pre><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inherit</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-decoration</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">none</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<img class="hoverZoomLink aligncenter wp-image-212 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/css-button-removed-style.png" alt="css button removed style" width="1430" height="262" />

<span style="font-weight: 400;">Next, add some padding to the button so it has some space between the sides and the text. Also, let’s add a border, so we can see how big the button is. We will get rid of that later.</span>
<pre><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inherit</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-decoration</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">none</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">1px</span> <span style="font-weight: 400;">solid</span> <span style="font-weight: 400;">black</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">padding</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">10px</span> <span style="font-weight: 400;">20px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<img class="hoverZoomLink aligncenter wp-image-220 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/button-overlapping.png" alt="button overlapping" width="1434" height="276" />

<span style="font-weight: 400;">Well, that doesn’t look right. Why is that? This has to do with the default </span><span style="font-weight: 400;">display</span><span style="font-weight: 400;"> property being set to inline for </span><b>&lt;a&gt;</b><span style="font-weight: 400;"> tags. Let’s change that to </span><span style="font-weight: 400;">inline</span><span style="font-weight: 400;">-</span><span style="font-weight: 400;">block</span><span style="font-weight: 400;">.</span>
<pre><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inherit</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-decoration</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">none</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">1px</span> <span style="font-weight: 400;">solid</span> <span style="font-weight: 400;">black</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">padding</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">10px</span> <span style="font-weight: 400;">20px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">display</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inline-block</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<span style="font-weight: 400;">Change the font to whatever you like. I’m going with a simple </span><strong>sans-serif</strong><span style="font-weight: 400;">.</span>
<pre><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inherit</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-decoration</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">none</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">1px</span> <span style="font-weight: 400;">solid</span> <span style="font-weight: 400;">black</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">padding</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">10px</span> <span style="font-weight: 400;">20px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">display</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inline-block</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">font-family</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">sans-serif</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}
</span></pre>
<span style="font-weight: 400;">I don’t like how this button is so close to the top of my container. So, I’m going to add some </span><strong>padding</strong><span style="font-weight: 400;"> to make things look a little nicer.</span>
<pre><span style="font-weight: 400;">.button-container</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">1px</span> <span style="font-weight: 400;">solid</span> <span style="font-weight: 400;">black</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-align</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">center</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">padding</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">20px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">} 

</span></pre>
<img class="hoverZoomLink aligncenter wp-image-221 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/basic-button.png" alt="basic button" width="1424" height="436" />

<span style="font-weight: 400;">And that’s a basic button. Sure, it looks pretty plain, but it’s much better than the ugly </span><b>&lt;a&gt;</b><span style="font-weight: 400;"> tag that we started with.</span>

<span style="font-weight: 400;">However, we really need to…</span>
<h2><span style="font-weight: 400;">Add transitions to your button</span></h2>
<span style="font-weight: 400;">One very important part of doing front-end work (or any UX work for that matter), is giving some kind of feedback to the user. When the user hovers over the button, we are going to raise the button up a little bit. We do this by </span><span style="font-weight: 400;">transform</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">translate</span><span style="font-weight: 400;">(your-value)</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">Remember that coordinates on the DOM are a little bit different from what you learned in high school math class. 0,0 (x = 0, y = 0) starts at the top-left of the screen. That means in order to move something right, you increase the x value. Moving something down involves increasing the y value.</span>

<span style="font-weight: 400;">We want to move the button up, so we will do the following.</span>
<pre><span style="font-weight: 400;">.btn:hover</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">transform</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">translateY</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">-3px</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;">}</span></pre>
<img class="hoverZoomLink aligncenter wp-image-219 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/css-buttons-tutorial-01-moving-button-up.gif" alt="css-buttons-tutorial-01-moving-button-up" width="600" height="183" />

<span style="font-weight: 400;">And this is what the button looks like when the user hovers over it.</span>

<span style="font-weight: 400;">If you look closely, you can see that the button seems to ‘jump’ to the next position. This is because we haven’t told the browser how fast to make this transition. In order to do that, we use the </span><span style="font-weight: 400;">transition</span><span style="font-weight: 400;"> property. This tells the browser how long to take from the initial state to the final state. You can play around with the value to see the differences, but I am going to use </span><span style="font-weight: 400;">0</span><span style="font-weight: 400;">.1s</span><span style="font-weight: 400;"> in this example.</span>

<span style="font-weight: 400;">Also, I am using </span><span style="font-weight: 400;">all</span><span style="font-weight: 400;"> in the </span><span style="font-weight: 400;">transition</span><span style="font-weight: 400;"> property in order to also set the speed for future transitions that happen with the </span><b>.btn</b><span style="font-weight: 400;"> element.</span>
<pre><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inherit</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-decoration</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">none</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">1px</span> <span style="font-weight: 400;">solid</span> <span style="font-weight: 400;">black</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">padding</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">10px</span> <span style="font-weight: 400;">20px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">display</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inline-block</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">font-family</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">sans-serif</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">transition</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">all</span> <span style="font-weight: 400;">0.1s</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<img class="hoverZoomLink aligncenter wp-image-215 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/css-buttons-tutorial-02-transition-speed.gif" alt="css-buttons-tutorial-02-transition-speed" width="600" height="181" />

<span style="font-weight: 400;">In order to make our button appear to have 3 dimensions, we are going to add a </span><span style="font-weight: 400;">box-shadow</span><span style="font-weight: 400;"> to the </span><b>.btn</b><span style="font-weight: 400;"> when it is in the </span><span style="font-weight: 400;">:hover</span><span style="font-weight: 400;"> state. This works, because a real, physical 3-dimensional button would have some height and block some light on the opposite side of its light source, causing a small shadow.</span>

<span style="font-weight: 400;">The box shadow takes a few arguments which include the x-offset, y-offset, blur radius, and color of the shadow. Setting the y-offset makes it look as if the light source is coming from the top, leading to a shadow on the bottom.</span>
<pre style="text-align: left;"><span style="font-weight: 400;"> </span>
<span style="font-weight: 400;">.btn:hover</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> transform</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">translateY</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">-3px</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">box-shadow</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">0</span> <span style="font-weight: 400;">10px</span> <span style="font-weight: 400;">4px</span> <span style="font-weight: 400;">rgba</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">0</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">0</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">0</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">0.2</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;">}</span></pre>
<img class="hoverZoomLink aligncenter wp-image-216 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/Css-buttons-tutorial-03-box-shadow.gif" alt="Css-buttons-tutorial-03-box-shadow" width="600" height="181" />

<span style="font-weight: 400;">The </span><span style="font-weight: 400;">:active</span><span style="font-weight: 400;"> pseudo-class is activated when the user clicks on the button. Again, a real physical button would be pressed in, leading to a lower height and smaller shadow. So let’s do that.</span>

<span style="font-weight: 400;">Since we set </span><strong>href="#"</strong><span style="font-weight: 400;">, the page will just reload. If you blink, you might miss this, but you can also try holding down the button to see the effect a bit longer.</span>
<pre><span style="font-weight: 400;">.btn:active</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">transform</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">translateY</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">1px</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">box-shadow</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">0</span> <span style="font-weight: 400;">10px</span> <span style="font-weight: 400;">2px</span> <span style="font-weight: 400;">rgba</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">0</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">0</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">0</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">0.2</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;">}</span></pre>
<img class="hoverZoomLink aligncenter wp-image-217 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/Css-buttons-tutorial-04-button-click-.gif" alt="Css-buttons-tutorial-04-button-click" width="600" height="181" />
<h2><span style="font-weight: 400;">Extending the base .btn class</span></h2>
<span style="font-weight: 400;">This is the basis of our <strong>.btn</strong> class. We’re going to add some more classes in order to reuse this ‘base component.’ Add some </span><span style="font-weight: 400;">margin</span><span style="font-weight: 400;"> to your </span><strong>.button-container</strong><span style="font-weight: 400;"> to add some spacing.</span>
<pre><span style="font-weight: 400;">.button-container</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">1px</span> <span style="font-weight: 400;">solid</span> <span style="font-weight: 400;">black</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-align</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">center</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">padding</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">20px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">margin</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">50px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span>
</pre>
<span style="font-weight: 400;">Add a </span><strong>border-radius</strong><span style="font-weight: 400;"> to your button. You can do this in your base </span><b>.btn</b><span style="font-weight: 400;"> class, but I’m going to create a new class. </span>
<pre><span style="font-weight: 400;">.btn-round</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border-radius</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">80px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<span style="font-weight: 400;">Add a new </span><b>.btn</b><span style="font-weight: 400;"> with the class </span><strong>.btn-round</strong><span style="font-weight: 400;"> and now we can see our two buttons.</span>
<pre><span style="font-weight: 400;">    </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">div</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"button-container"</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">a</span> <span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">""</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"btn"</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">Click me</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">a</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">div</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">div</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"button-container"</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">a</span> <span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">""</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"btn btn-round"</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">Click me</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">a</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">.btn .btn-round</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">div</span><span style="font-weight: 400;">&gt;</span></pre>
<img class="hoverZoomLink aligncenter wp-image-222 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/button-round.png" alt="button round" width="1252" height="1080" />

<span style="font-weight: 400;">Now, we’re getting to the real exciting stuff. Let’s use CSS variables. Using CSS variables means you can reuse the same values all throughout your code. Later you can come back and change one value which will flow through to the rest of your document.</span>

<span style="font-weight: 400;">Set up your variables in </span><span style="font-weight: 400;">:root</span><span style="font-weight: 400;">. I got these colors from </span><a href="https://flatuicolors.com/palette/defo"><span style="font-weight: 400;">Flat UI Colors</span></a><span style="font-weight: 400;">.</span>
<pre><span style="font-weight: 400;">:root</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">--primary-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">#3498db</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">--primary-button-text-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">white</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<span style="font-weight: 400;">Create a new class and use those variables.</span>
<pre><span style="font-weight: 400;">.btn-primary</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">background-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">var</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">--primary-color</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">var</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">--primary-button-text-color</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;">}</span></pre>
<span style="font-weight: 400;">Create a new </span><b>.btn</b><span style="font-weight: 400;"> with </span><strong>.btn-round</strong><span style="font-weight: 400;"> and </span><b>.btn-primary</b><span style="font-weight: 400;">.</span>
<pre><span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">div</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"button-container"</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">a</span> <span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">""</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"btn btn-round btn-primary"</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">Click me</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">a</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">.btn .btn-round .btn-primary</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">div</span><span style="font-weight: 400;">&gt;</span></pre>
<span style="font-weight: 400;">And this is what we get.</span>

<img class="hoverZoomLink aligncenter wp-image-218 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/Css-buttons-tutorial-05-button-primary.gif" alt="Css-buttons-tutorial-05-button-primary" width="600" height="181" />

<span style="font-weight: 400;">Since we now have a background and can see the shape of the button, we can get rid of the border. You could always create a </span><b>.btn-border</b><span style="font-weight: 400;"> class which adds a border to any </span><b>.btn</b><span style="font-weight: 400;"> elements you like.</span>

<span style="font-weight: 400;">In your CSS file, delete this line. I commented it out so you can see what line to remove.</span>
<pre><span style="font-weight: 400;">.btn</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inherit</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">text-decoration</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">none</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">/*border: 1px solid black; */</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">padding</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">10px</span> <span style="font-weight: 400;">20px</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">display</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inline-block</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">font-family</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">sans-serif</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">transition</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">all</span> <span style="font-weight: 400;">0.1s</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<span style="font-weight: 400;">The great thing about this CSS button setup is that it’s pretty extendable. Now we can add as many colors or styles that we want and just add them to our elements that have the </span><b>.btn</b><span style="font-weight: 400;"> class.</span>

<span style="font-weight: 400;">Here, I’m adding a .</span><span style="font-weight: 400;">btn-secondary</span><span style="font-weight: 400;"> class. If you’ve ever used </span><a href="https://getbootstrap.com/"><span style="font-weight: 400;">Bootstrap</span></a><span style="font-weight: 400;">, these classnames and design patterns should look pretty close to what you’re used to.</span>
<pre><span style="font-weight: 400;">:root</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">--primary-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">#3498db</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">--primary-button-text-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">white</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">--secondary-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">#2ecc71</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">--secondary-button-text-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">white</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}</span></pre>
<pre><span style="font-weight: 400;">.btn-secondary</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">background-color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">var</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">--secondary-color</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">color</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">var</span><span style="font-weight: 400;">(</span><span style="font-weight: 400;">--secondary-button-text-color</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;">}</span></pre>
<span style="font-weight: 400;">Add a </span><b>.btn-secondary</b><span style="font-weight: 400;"> to your page.</span>
<pre><span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">div</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"button-container"</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">a</span> <span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">""</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"btn btn-round btn-secondary"</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">Click me</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">a</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">.btn .btn-round .btn-secondary</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">div</span><span style="font-weight: 400;">&gt;</span></pre>
<img class="hoverZoomLink aligncenter wp-image-223 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/button-secondary.png" alt="button secondary" width="1160" height="462" />
<h2><span style="font-weight: 400;">Styling the &lt;button&gt; element</span></h2>
<span style="font-weight: 400;">If you are working with forms, you’ll probably use the </span><b>&lt;button&gt;</b><span style="font-weight: 400;"> tag instead of </span><b>&lt;a&gt;</b><span style="font-weight: 400;"> tags to submit your form. However, browsers give the </span><b>&lt;button&gt;</b><span style="font-weight: 400;"> tag some ugly styles. Do the following to reset those styles.</span>
<pre><span style="font-weight: 400;">button</span><span style="font-weight: 400;"> {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">border</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">none</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">font-size</span><span style="font-weight: 400;">: </span><span style="font-weight: 400;">inherit</span><span style="font-weight: 400;">;</span>

<span style="font-weight: 400;">}

</span></pre>
<pre><span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">div</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"button-container"</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">button</span> <span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">""</span> <span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"btn btn-round btn-secondary"</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">Click me</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">button</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">     </span><span style="font-weight: 400;">&lt;</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span><span style="font-weight: 400;">button</span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">p</span><span style="font-weight: 400;">&gt;</span>

<span style="font-weight: 400;">   </span><span style="font-weight: 400;">&lt;/</span><span style="font-weight: 400;">div</span><span style="font-weight: 400;">&gt;</span></pre>
<span style="font-weight: 400;">Now, this is what our button should look like.</span>

<img class="hoverZoomLink aligncenter wp-image-224 size-full" src="https://itsjoshlee.com/wp-content/uploads/2022/09/button-button.png" alt="button button" width="1152" height="456" />
<h2><span style="font-weight: 400;">Closing</span></h2>
<span style="font-weight: 400;">If you liked this tutorial and would like to see more please like and share this post. Follow me on </span><a href="https://twitter.com/heyjoshlee"><span style="font-weight: 400;">Twitter</span></a><span style="font-weight: 400;">, </span><a href="https://dev.to/jleewebdev"><span style="font-weight: 400;">Dev.io</span></a><span style="font-weight: 400;">, or </span><a href="http://heyjoshlee.medium.com"><span style="font-weight: 400;">Medium</span></a><span style="font-weight: 400;">, or connect with me on </span><a href="https://www.linkedin.com/in/josh-lee-dev/"><span style="font-weight: 400;">LinkedIn</span></a><span style="font-weight: 400;">.</span>

<span style="font-weight: 400;">Need a front-end developer that knows HTML, CSS, Javascript, and React? Feel free to shoot me a message on any of the above platforms and let’s see how we can work together.</span>

<span style="font-weight: 400;">As always, questions and comments are welcome below.</span>
<div id="hzViewer" style="background: none; line-height: 0px; overflow: hidden; padding: 10px 5px; position: absolute; z-index: 2147483647; visibility: visible; opacity: 1; cursor: pointer; pointer-events: none; top: 4098px; left: 5px; width: auto; height: auto; display: none;"></div>
<div id="hzViewer" style="background: none; line-height: 0px; overflow: hidden; padding: 10px 5px; position: absolute; z-index: 2147483647; visibility: visible; opacity: 1; cursor: pointer; pointer-events: none; top: 12279px; left: 5px; width: auto; height: auto; display: none;"></div>