Sign Up!
<style>
a.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
</style>
<a class="css3dbutton" href="#">Sign Up!</a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3D kerek gombok</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
a.css3dbutton {
background: #c1e75c; /* default green background color of button */
color: black;
text-decoration: none;
font: bold 18px Arial; /* font size and style */
position: relative;
display: inline-block;
margin-right: 15px; /* spacing between multiple buttons */
padding: 15px; /* padding inside button */
border-radius: 85px; /* border radius of button */
width: 65px; /* dimensions of button */
height: 65px;
outline: none;
box-shadow: 0 8px 0 #8dab3b, /* depth and color of main shadow */
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
-moz-transition: all 0.2s ease-in-out; /* transition style and duration */
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton span.outer{ /* outermost text container */
text-align: center;
width: 100%;
display: block;
position: relative;
top: 50%; /* center element */
-webkit-transform: translateY(-50%); /* center element */
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
a.css3dbutton span.outer span.top{ /* top line */
display: block;
padding-bottom: 4px;
}
a.css3dbutton span.outer span.bottom{ /* bottom line */
border-top: 1px solid black;
padding-top: 4px;
display: block;
text-transform: uppercase;
line-height: 12px;
font-size: 60%;
}
a.css3dbutton:hover {
background: #9cc62b; /* background color when mouse rolls over button */
box-shadow: none;
-ms-transform: translateY(8px); /* shift button downwards by shadow depth amount */
-webkit-transform: translate3D(0, 8px, 0);
-moz-transform: translateY(8px);
transform: translate3D(0, 8px, 0);
}
a.css3dbutton.blue{
background: #a6e9f7;
box-shadow: 0 8px 0 #529dad, /* depth and color of main shadow */
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.blue:hover {
background: #66cbe1; /* background color when mouse rolls over button */
box-shadow: none;
}
a.css3dbutton.pink{
background: #fbbaba;
box-shadow: 0 8px 0 #d74848, /* depth and color of main shadow */
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.pink:hover {
background: #ea6161; /* background color when mouse rolls over button */
box-shadow: none;
}
a.css3dbutton.yellow{
background: #f3fa86;
box-shadow: 0 8px 0 #dbcd2f, /* depth and color of main shadow */
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.yellow:hover {
background: #ecd347; /* background color when mouse rolls over button */
box-shadow: none;
}
a.css3dbutton.szurke{
background: #cccccc;
box-shadow: 0 8px 0 #666666, /* depth and color of main shadow */
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.szurke:hover {
background: #999999; /* background color when mouse rolls over button */
box-shadow: none;
}
</style>
</head>
<body>
<a href="#" class="css3dbutton">
<span class="outer">
<span class="top">Sign Up!</span>
<span class="bottom">It's free and fast</span>
</span>
</a>
<br>
<a href="#" class="css3dbutton blue">
<span class="outer">
<span class="top">Sign Up!</span>
<span class="bottom">It's free and fast</span>
</span>
</a>
<br>
<a href="#" class="css3dbutton pink">
<span class="outer">
<span class="top">Sign Up!</span>
<span class="bottom">It's free and fast</span>
</span>
</a>
<br>
<a href="#" class="css3dbutton yellow">
<span class="outer">
<span class="top">Sign Up!</span>
<span class="bottom">It's free and fast</span>
</span>
</a>
<p>
<a href="#" class="css3dbutton szurke">
<span class="outer">
<span class="top">Hello!</span>
<span class="bottom">Mizu Mizu</span>
</span>
</a>
</p>
</body>
</html>
3D kerek gombok
Sign Up!
It's free and fast
Sign Up!
It's free and fast
Sign Up!
It's free and fast
Sign Up!
It's free and fast
Hello!
Mizu Mizu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hiperlink képekel css segítségével.</title>
<style>
#menu{
width:1040px;
height: 300px;
margin: 0 auto;
}
#menu ul {
list-style: none;
padding-left: 0px;
}
#menu li {
display: inline;
}
#button1{
background: url(kepek/a.jpg) no-repeat left;
width: 256px;
height: 300px;
display: block;
text-align: center;
}
#button1:hover{
text-decoration: none;
background: url(kepek/a2.jpg);
background-repeat:no-repeat;
}
#button2{
background:url(kepek/b.jpg) no-repeat left;
width: 256px;
height: 300px;
display: block;
text-align: center;
}
#button2:hover{
text-decoration: none;
background: url(kepek/b2.jpg);
background-repeat:no-repeat;
}
#button3{
background: url(kepek/c.jpg) no-repeat left;
width: 256px;
height: 300px;
display: block;
text-align: center;
}
#button3:hover{
text-decoration: none;
background: url(kepek/c2.jpg);
background-repeat:no-repeat;
}
#button4{
background: url(kepek/d.jpg) no-repeat left;
width: 256px;
height: 300px;
display: block;
text-align: center;
}
#button4:hover{
text-decoration: none;
background: url(kepek/d2.jpg);
background-repeat:no-repeat;
}
#menu ul
{
margin: 0px;
padding: 0px;
}
#menu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
color: #ffffff;
float: left;
width: 256px;
height: 300px;
display: block;
text-align: center;
text-decoration: none;
padding-top: 0px;
margin-right: 0px;
}
#menu a:hover{
}
</style>
</head>
<body bgcolor="#000000">
<div id="menu">
<ul>
<img src="kepek/fej.png" width="1024" height="100" />
<li><a href="#" title="" id="button1">Home</a></li>
<li><a href="#" title="" id="button2">Blog</a></li>
<li><a href="#" title="" id="button3">Gallery</a></li>
<li><a href="#" title="" id="button4">About</a></li>
<font color="#FFFFFF" face="28 Days Later" size="+3">webmarketshop@gmail.com</font>
</ul>
</div>
</div>
</body>
</html>
