Stream and download on your phone, tablet or pc. 13-Tracks including. The Introduction - Nav (DJ BJ). The Introduction. 5, Nav - Take Me Simple, 2:56. Simple Menu Templates Online menu design makes it very convenient to edit menus frequently, or update designs for a fresh look. Our collection of simple menu templates are designed for busy restaurants that need to update their menus often. About “Take Me Simple” Nav is portraying his street struggles and the things that come along with this life. He also, elaborates on his transition to the music industry and his chase for wealth. Free download Nav - Take Me Simple #16802511 mp3 or listen online music. If you take me simple, I swear you won't take simple again If you take me simple, I swear you won't take simple again Catch me in the 6 with my day ones We don't need no new friends (If you take me simple, I swear you won't take simple again no) These pussies rapping on road, but they singing in jail My bro on the run, tryna stack up his bail.

Here at Design Shack we like to feature a full range of tutorials, from expert PHP projects to very simple CSS tips. Today’s tutorial is targeted at those still in the beginner stages of CSS.

Nav Take Me Simple Download Youtube

One of the most frequent questions I get from CSS beginners is, “How do I create a button?” It’s a simple question with a complicated answer. There are quite a few ways to go about it and unfortunately there are also quite a few ways to go wrong. When I first started out in CSS, figuring out all the button syntax was one of the most persistent troubles I faced, it seemed like I was always doing it wrong. Today we’re going to walk through a very simple and flexible process that you can apply to any button you create. More important than the end result is the in-depth explanation at each point outlining why we do it that way.

Step 1: The HTML

Believe it or not, this is one of the trickiest parts. To an experienced coder, it seems so simple. To a beginner though, knowing where to start with a button can be quite difficult. Should you use the “button” HTML tag? Or perhaps a paragraph tag? Which parts should the link wrap around?

It turns out that the simplest and most widely used syntax is just to implement a plain old anchor tag (form buttons often use “input”). From a functional standpoint, all we’re really trying to create is a link that, when clicked, takes us somewhere new, which is exactly what a basic HTML link does. Often in web design, the choice to turn something into a button is merely an aesthetic one and doesn’t necessarily indicate any special functionality.

Here’s a widely used snippet of HTML that gets the job done perfectly while staying nice and succinct:

The most important thing I did here was to set “display” to “block”. This will allow us to turn our text link into a larger box with a defined width and height. After that I simply set my size and background color, then added a border. I’ll be using “rgba” quite a bit, if you want to make this a little more friendly to older browsers, check out this article on declaring rgba fallbacks.

Step 2 Preview

After step two you should have a fairly boring looking box with some impossible to read text inside.

Step 3: Text Styles

Next up, it’s time to attack that ugly text. To make sure you can keep up with each step, I’ll simply keep adding to what we’ve previously built with comments to help you see each step:

Nav Take Me Simple Download Free

Each of these can be tricky to read so let’s go through them one by one. First, I added a gradient that uses the color we already had in place and fades to something a tiny by darker. I left in my previous background color above that section to act as a fallback.

Next up is the border radius. I decided to go with a really heavy rounded corner that will give the button a pill shape. Since I want all my corners to be the same, I simply declare one value and it gets applied uniformly.

Finally, I threw in some shadows. Both the box and the text shadow that I used are a little peculiar. For the box shadow, a gave it a vertical offset but no horizontal one and also left the feathering at 0. This will give a nice little faux 3D effect that doesn’t require too much work or code. For the text shadow, I also applied a vertical offset and set the color to white at 20% opacity. This is a super easy way to create a letterpressed effect and make the text appear as if it sinks into the button.

Use Prefixr for Browser Prefixes

Notice that the code above isn’t cross-browser compatible at all. In the initial stages of experimentation, I hate mucking up my code with half a dozen browser prefixes and often forget whether or not a given browser has a unique syntax.

Once I’ve got things looking the way I want in Espresso (my IDE of choice) using basic syntax, I can toss all of that code into a little free tool called Prefixr, which will process it and spit out my code with all of the correct available browser specific versions automatically added.

Now when you hover over the button, its color/brightness will shift. It’s a subtle effect but is definitely strong enough for any user to notice, even if they’re colorblind.

Finished!

After step five, you’re all done! You should now have a beautiful button created entirely with CSS and HTML. More importantly though, you should have a strong feel for the basic workflow to follow to craft a button using CSS.

Demo: To see the button in action, click here or on the image above.
jsFiddle: To Fiddle with the code, click here.

Conclusion

We learned a lot of very important things today. First, we saw that we can use a basic HTML anchor tag as the starting point for our button and that it’s good to style buttons with reusable classes. We also learned how to start by styling a basic button that will work well across all browsers and to toss in added flair later rather than basing the entire structure of the button on techniques that won’t be be widely accessible. Finally, we saw how to keep things simple by coding with basic CSS3 properties until we get everything just right, and then follow that up with a trip to Prefixr, which expands our code to something as cross-browser compatible as possible.

Leave a comment below and let us know what you think. If you’re a beginner, was this helpful to you? If you’re a seasoned pro, what would you do differently?