CSS Transparent Buttons with Border

Posted on August 11, 2017 by Dan Doicaru in HTML/CSS Category with Easy Difficulty

In this simple tutorial you will learn how to create CSS transparent buttons with border that have smooth transitions and transparent background on hover.

Video Tutorial

HTML Structure

You can either use anchors, spans or other inline elements. It's not recommended to use elements block elements such as divs.

<a href="#" class="transparent_btn">White Button</a>
<span href="#" class="transparent_btn orange">Orange Button</span>
<span href="#" class="transparent_btn blue">Blue Button</span>
<a href="#" class="transparent_btn green">Green Button</a>

Tips: Chrome Color Picker

You can edit your colors live, in any page, to see if that particular color is matching your background or website. Just right click on any element, and choose Inspect Element.

In the properties panel, click on the CSS color icon of your element to open the color picker and match your desired color. You can SHIFT + Click the color icon to change it's format (HEX, RGB etc.) and copy it to your editor.

Chrome Color Picker and Convertor

CSS for Transparent Buttons

We can use a simple global class for all the buttons that you want to have border, in my case transparent_btn, then you can use another simple class as the color.

/* Global Button */
.transparent_btn {
	display: inline-block;
	padding: 10px 14px;
	color: #FFF;
	border: 1px solid #FFF;
	text-decoration: none;
	font-size: 14px;
	line-height: 120%;
	background-color: rgba(255,255,255, 0);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: background-color 300ms ease;
	-moz-transition: background-color 300ms ease;
	transition: background-color 300ms ease;
	cursor: pointer;
}
.transparent_btn:hover {
	background-color: rgba(255,255,255, 0.3);
	color: #FFF;
}

/* Orange Button */
.transparent_btn.orange {
	color: #ffc65d;
	border-color: #ffc65d;
}
.transparent_btn.orange:hover {
	background-color: rgba(255, 198, 93, 0.3);
}

/* Blue Button */
.transparent_btn.blue {
	color: #aeddf5;
	border-color: #aeddf5;
}
.transparent_btn.blue:hover {
	background-color: rgba(174, 221, 245, 0.3);
}

/* Green Button */
.transparent_btn.green {
	color: #86ec93;
	border-color: #86ec93;
}
.transparent_btn.green:hover {
	background-color: rgba(134, 236, 147, 0.3);
}

Final Results of the CSS Transparent Buttons

As you can see above, the general class has only the main design of our css transparent buttons with border and the other simple classes contains only colors.

CSS Transparent Buttons with Border

This is a great technique to save time, page speed and keep the elements reusable with light code.

Live Demo

Download

Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 4 = 10

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.