Buttons with Nice Highlights

by csscreations

Buttons with highlights made by Tait Brown. I improved the buttons by adding vendor prefixed versions of linear gradients, box shadows and transitions. The highlight effect is really nice.

HTML

<p>
    <button>
        <span class="highlight"></span>
        <span class="text">Button</span>
    </button>
</p>

<p>
    <button>
        <span class="highlight"></span>
        <span class="text">Really Long Text</span>
    </button>
</p>

CSS

body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
	background: #212830;
}

button {
    background-color: #22292e;
    
	background-image: -webkit-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: -moz-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: -ms-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: -o-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	
    border: 1px solid #0b1319;
    color: #aeb6bc;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    padding: 8px 14px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
    position: relative;
    cursor: pointer;
	
    -webkit-transition: color 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out;
	-ms-transition: color 0.3s ease-in-out;
	-o-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}

.highlight {
    width: 100%;
    height: 1px; 
    position: absolute;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: -moz-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: -ms-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: -o-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
    opacity: 0.2;
	
    -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

button:hover .highlight {
    opacity: 1;
}
button:hover {
    color: #FFF;
}

p {
    margin: 20px;   
}

Browser Screenshots (1)

Load Hide

More Items

Add New Comment

Showing Comments

Cameron K.

Try “width: 100%;” under .highlight ;)

4 Months ago

Quanta

aah, great! :)

4 Months ago

Submit Your Creation

Submissions are most welcome! Also Share your feedbacks (using the feedback button on the right) and help us improve.

Join us on Google+ now.

Follow @cssdeck

About

A Collection of Pure CSS Creations! Let's form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS. Hopefully the creations will help them get better at the new features of CSS (and in general too) and they'll start making more use of it in their projects :)

Lots of new exciting features coming soon! Stay Tuned.

Login with

Twitter

Github

Buttons with Nice Highlights

HTML

CSS

Browser Screenshots (1)

More Items

Quickly Build a Swish...

HoverBoard 3D

CSS3 Laser Effect

BonBon buttons

Pure CSS3 Iconset

Captain America's Shield

BMW Logo

CSS QWERT Keyboard

Add New Comment

Showing Comments

Cameron K.

Quanta

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Buttons with Nice Highlights

HTML

CSS

Browser Screenshots (1)

More Items

Quickly Build a Swish...

HoverBoard 3D

CSS3 Laser Effect

BonBon buttons

Pure CSS3 Iconset

Captain America's Shield

BMW Logo

CSS QWERT Keyboard

Add New Comment

Showing Comments

Cameron K.

Quanta

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Share a Feedback