Beautiful CSS Buttons

Here we go again! Stuck at the CSS trying to make the content look good but alas nothing came to mind. It’s the most irritating time for a front-end developer. You have all the things you need but no attraction for the user.

So I have started preparing small snippets of code beautiful and elegant. Just include it in your code and you are good to go (or you could learn). You could also take a sneak peak at the end result here.

Since it’s just a small snippet of code, the post is going to be fairly shorter than the rest. So let’s jump right into it.

Let’s first list down all the things buttons should have –

  1. It should stand out as a button
  2. It should show some response to user action like hover or click.

 

HTML

HTML is going to be very simple. We want the HTML code is be as small as possible so it could be easily replicated and reused.



<div class="buttons">


<div class="pump basic nclick" onclick="changeStatus(this)">
       <button>Watch tutorial</button>
    </div>


</div>


Since we will be building multiple buttons, we have defined a common pump class to provide common properties and basic class for the first type of button. We will also provide onClick functionality by giving separate classes – nclick & click.

 

JAVASCRIPT

We define a single method by the name changeStatus to toggle between the classes nclick and click . 

function changeStatus(ele) {
    if(ele.className.match(/\bnclick\b/)) {
        ele.className = ele.className.replace(/\bnclick\b/, "click");
    } else {
        ele.className = ele.className.replace(/\bclick\b/, "nclick");
    }
}

CSS

Now we have reached the interesting part. The beauty lies here and here only. We first define the shape of the button.

div.pump button {
	height: 50px;
	width: 50px;
	font-size: 0;
	border-radius: 25px;
	border: 0;
	background: rgba(21, 21, 21, .6);
	color: #AAA;
	font-family: Roboto, sans-serif;
	text-transform: uppercase;
	font-weight: 200;
	text-indent: 20px;
	box-shadow: 0 2px 5px 1px #212121;
	position: relative;
	cursor: pointer;
	outline: none;

	transition: all 50ms ease-out;
}
div.pump button:after{
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	margin-left: -10px;
	position: absolute;
	top: calc(50% - 15px);
	left: calc(50% - 5px);
	transition: all 50ms ease-out;
}

That would form a beautiful rounded cornered button. The idea is to form a solid color background with button with 60% transparency. We want the button to be small and a complete circle with only an icon at first. After the user issued a hover on the button, the button should increase in width and show textual description of the button.

The :after psuedo element will show the icon of the image. We will be using icons provided by the Google.

div.pump.basic button {
	background: rgba(21, 21, 21, .6);
	color: #AAA;
	box-shadow: 0 2px 5px 1px #212121;
}

The styles above are specially defined for the basic class of buttons. More classes can be defined like that.

div.pump.basic.nclick button:after {
	background: url('https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg') no-repeat center;
}

Now we assigned the background image to that icon we talked about. It’s a simple play icon in SVG format. Notice It only targets in cases when the button is not clicked.

div.pump.click button:after {
	background: url('https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_cached_white_24px.svg') no-repeat center;
	animation: rotate 1s linear infinite;
}

@keyframes rotate {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}

On click we want to change the icon to a loading SVG icon. Notice the animation will provide the illusion of processing.

Now we cover the wrapper of all the buttons we define. The wrapper is provided with the class buttons.

div.buttons {
	position: absolute;
	top: calc(50% + 120px);
	width: 100vw;
	text-align: center;
}

div.buttons > div {
	display: inline-block;
	margin-right: 30px;
}

div.pump {
	transition: all 50ms ease-out;
}

 

Now the final part. On hover we want the button elements to do the following things.

  1. Button width should increase.
  2. Icon should move to the left of the button as to make space for the text.
  3. Text should appear.
div.pump.nclick:hover {
	left: calc(50% - 7em);
}

div.pump.nclick button:hover {
	width: 200px;
	font-size: 12px;
}

div.pump.nclick button:hover:after {
	left: 30px;
}

And we are done. Don’t forget to check out the Source Code at GitHub. It contains more buttons.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s