CSS3 Button Examples

Developer
Volusion Services
Size
3,377 Kb
Views
42,504
  1. CSS3 Button Examples Previews
  2. CSS3 Button Examples HTML Codes
  3. CSS3 Button Examples CSS Codes

How do I make an css3 button examples?

Css3 button effects. What is a css3 button examples? How do you make a css3 button examples? This script and codes were developed by Volusion Services on 11 August 2022, Thursday.

CSS3 Button Examples Previews
IQ Test

CSS3 Button Examples - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Button Examples</title> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- #################### BUTTON EXAMPLES #################### -->
<div class="button-wrapper"> <!-- FIRST EXAMPLE --> <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="http://design14.volusion.com/v/proofs/Hack_Day_CSS3/images/cart.png" alt="Photos" /> <span class="a-btn-text">Shop Now</span> <span class="a-btn-icon-right"><span></span></span> </a> <!-- SECOND EXAMPLE --> <a href="#" class="a-btn-2"> <span class="a-btn-2-slide-text">$29</span> <img src="http://design14.volusion.com/v/proofs/Hack_Day_CSS3/images/cart.png" alt="Photos" /> <span class="a-btn-2-text">Shop Now</span> <span class="a-btn-2-icon-right"><span></span></span>	</a> <!-- THIRD EXAMPLE --> <a href="#" class="a-btn-3"> <span class="a-btn-3-text">Get Our E-Newsletter!</span> <span class="a-btn-3-slide-text">Hot Deals!</span> <span class="a-btn-3-icon-right"><span></span></span>	</a>
</div><!-- /button_wrapper -->
</body>
</html>

CSS3 Button Examples - Script Codes CSS Codes

/* BUTTON UNIVERSAL SYLES */
.button-wrapper { margin: 0 auto; padding: 20px 0; width: 320px;	clear: both;
}
.button-wrapper a {	color: #FFFFFF;	text-decoration: none;	font-family: 'Oswald',Arial,sans-serif;
}
/* ################# BUTTON STYLE 1 ################# */
.a-btn{ background:#a9db80; background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1)); background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%); background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%); background:linear-gradient(top, #a9db80 0%, #96c56f 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); padding-left:90px; padding-right:105px; height:90px; display:inline-block; position:relative; border:1px solid #80ab5d; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:box-shadow 0.3s ease-in-out; -moz-transition:box-shadow 0.3s ease-in-out; -o-transition:box-shadow 0.3s ease-in-out; transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{ position:absolute; left:15px; top:13px; border:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{ position:absolute; font-size:36px; top:18px; left:18px; color:#6d954e; opacity:0; text-shadow:0px 1px 1px rgba(255,255,255,0.4); -webkit-transition:opacity 0.2s ease-in-out; -moz-transition:opacity 0.2s ease-in-out; -o-transition:opacity 0.2s ease-in-out; transition:opacity 0.2s ease-in-out;
}
.a-btn-text{ padding-top:21px;	padding-left: 5px; display:block; font-size:30px; text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:80px; border-left:1px solid #80ab5d; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{ width:38px; height:38px; opacity:0.7; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; border:1px solid rgba(0,0,0,0.5); background:#4e5c50 url(http://design14.volusion.com/v/proofs/Hack_Day_CSS3/images/arrow_right.png) no-repeat center center; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}
.a-btn:hover{ -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{ -webkit-transform:scale(10); -moz-transform:scale(10); -ms-transform:scale(10); -o-transform:scale(10); transform:scale(10); opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{ opacity:1;
}
.a-btn:active{ position:relative; top:1px; background:#80ab5d; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{ -webkit-transform:scale(1.4); -moz-transform:scale(1.4); -ms-transform:scale(1.4); -o-transform:scale(1.4); transform:scale(1.4);
}
/* ################# BUTTON STYLE 2 ################# */
.a-btn-2{ background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:90px; padding-right:105px; height:90px; display:inline-block; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:box-shadow 0.3s ease-in-out; -moz-transition:box-shadow 0.3s ease-in-out; -o-transition:box-shadow 0.3s ease-in-out; transition:box-shadow 0.3s ease-in-out;
}
.a-btn-2 img{ position:absolute; left:15px; top:13px; border:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}
.a-btn-2 .a-btn-2-slide-text{ position:absolute; font-size:36px; top:18px; left:18px; color:#bde086; text-shadow:0px 1px 1px rgba(0,0,0,0.3); -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); opacity:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}
.a-btn-2-text{ padding-left: 5px; padding-top: 21px; display:block; font-size:30px; text-shadow:0px -1px 1px #5d81ab;
}
.a-btn-2-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:80px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-2-icon-right span{ width:38px; height:38px; opacity:0.7; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; border:1px solid rgba(0,0,0,0.5); background:#5b5b5b url(http://design14.volusion.com/v/proofs/Hack_Day_CSS3/images/arrow_right.png) no-repeat center center; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}
.a-btn-2:hover{ -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn-2:hover img{ opacity:0;
}
.a-btn-2:hover .a-btn-2-slide-text{ opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);
}
.a-btn-2:hover .a-btn-2-icon-right span{ opacity:1; background-color:#bc3532;
}
.a-btn-2:active{ position:relative; top:1px; background:#5d81ab; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da;
}
.a-btn-2:active .a-btn-2-icon-right span{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);
}
/* ################# BUTTON STYLE 3 ################# */
.a-btn-3{ background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:inline-block; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear;
}
.a-btn-3-text{ padding-top:5px; display:block; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear;
}
.a-btn-3-slide-text{ position:absolute; height:100%; top:0px; right:52px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:18px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear;
}
.a-btn-3-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-3-icon-right span{ width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url(http://design14.volusion.com/v/proofs/Hack_Day_CSS3/images/arrow_right.png) no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear;
}
.a-btn-3:hover{ padding-right:180px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn-3:hover .a-btn-3-text{ text-shadow:0px 1px 1px #5d81ab; color:#fff;
}
.a-btn-3:hover .a-btn-3-slide-text{ width:100px;
}
.a-btn-3:hover .a-btn-3-icon-right span{ opacity:1;
}
.a-btn-3:active{ position:relative; top:1px; background:#5d81ab; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da;
}
CSS3 Button Examples - Script Codes
CSS3 Button Examples - Script Codes
Home Page Home
Developer Volusion Services
Username volusion
Uploaded August 11, 2022
Rating 3.5
Size 3,377 Kb
Views 42,504
Do you need developer help for CSS3 Button Examples?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Volusion Services (volusion) Script Codes
Name
Search with SVG icon
Search collapse
Credit Card Icons in SVG
CSS3 Box Promos
Css3 Menu Examples
Collapsable Search
Flat Responsive Sliding Boxes
A Pen by Volusion Services
CSS Animated Ribbon
Vertical Center Mixin
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!