This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I'm trying to make a button that has several effects and one of them is to change the color of the text in the button on hover. How do I make sure that when you hover over one of the text elements, the buttons are highlighted in white all together? And second small question why the smooth transition from background-gradient to another background-gradient doesn't work?
.myButton {
transition: all 0.5s ease;
/* background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%); */
border-radius:16px;
display:inline-block;
cursor:pointer;
color: darkorange;
font-family:Arial;
font-size:100%;
font-weight:bold;
padding:0px 12px 0px 4px;
text-decoration:none;
text-indent: 6px;
background-image: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background-image: -moz-linear-gradient(top,#ededed 5%, #dfdfdf 100%);
background-image: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background-image: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background-image: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
border:1px solid #dcdcdc;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
a.myButton:hover span#highlight {
color: white;
}
a.myButton span {
color: darkorange;
}
#highlight {
color: darkorange;
}
.myButton:hover {
color: white;
background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
/* background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
background-color:#6c7c7c; */
box-shadow: 1px 1px 20px 0px darkorange;
}
<a href="/" style="float:center; padding-bottom: 7px;" class="myButton">
<span id="highlight" class="fas fa-angle-right"> ++ </span>
<span id="highlight" style="padding-bottom: 7px;">CLICK ME!</span>
<span id="highlight" style="position: relative; font-size: 180%;top: 3px;" class="fab fa-cloudversify"> ++ </span>
</a>
try this,
a.myButton:hover span#highlight {
color: white;
}
instead of
a.myButton span:hover #highlight {
color: white;
}
because you hover the <a> tag to change the color of all span having id highlight
.myButton {
transition: all 0.5s ease;
background-color:#768d87;
border-radius:16px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color: darkorange;
font-family:Arial;
font-size:100%;
font-weight:bold;
padding:0px 12px 0px 4px;
text-decoration:none;
text-indent: 6px;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
font-family: Verdana;
border: solid #gray 1px;
border:1px solid #dcdcdc;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
a.myButton:hover span#highlight {
color: white;
}
a.myButton span {
color: darkorange;
}
#highlight {
color: darkorange;
}
.myButton:hover {
color: white;
background:linear-gradient(to bottom, #ededed 5%, #006AFF 100%);
box-shadow: 1px 1px 20px 0px darkorange;
}
<a href="/" style="float:center; padding-bottom: 7px;" class="myButton"><span id="highlight" class="fas fa-angle-right"> ++ </span> <span id="highlight"style="padding-bottom: 7px;">CLICK ME!</span>
<span id="highlight" style="position: relative; font-size: 180%;top: 3px;" class="fab fa-cloudversify"> ++ </span></a>
I need to create button with gradient border and highlights at corners.
Im try do this with pseudoelements, but i have only 2/4 border sides. Thanks in advance!
.fly--btn {
background: rgba(0, 0, 0, 0.5);
color: #A9A9A9;
margin-top: 12%;
position: relative;
border: none;
padding: 5px 20px;
}
.fly--btn:before,
.fly--btn:after {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
}
.fly--btn:before {
top: -1px;
width: 1px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#101f2d), to(#3263a3));
background-image: -webkit-linear-gradient(#101f2d, #3263a3);
background-image: -o-linear-gradient(#101f2d, #3263a3);
background-image: linear-gradient(#101f2d, #3263a3);
}
.fly--btn:after {
right: -1px;
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(#3263a3), to(#101f2d));
background-image: -webkit-linear-gradient(left, #3263a3, #101f2d);
background-image: -o-linear-gradient(left, #3263a3, #101f2d);
background-image: linear-gradient(left, #3263a3, #101f2d);
}
<button type="button" class="fly--btn">
Начать путешествие
</button>
Here is and idea with gradient and multiple background:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(#fff,#fff) top right/10px 2px,
linear-gradient(#fff,#fff) top right/2px 10px,
linear-gradient(#fff,#fff) bottom left/10px 2px,
linear-gradient(#fff,#fff) bottom left/2px 10px,
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
}
body {
background:#222;
}
<div class="box"> some text here </div>
And if you want the shadow in the corner you can try pseudo element and drop-shadow like this:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
position:relative;
}
.box:before,
.box:after {
content:"";
position:absolute;
width:10px;
height:10px;
border:2px solid #fff;
filter:drop-shadow(0 0 3px);
}
.box:before {
top:0;
right:0;
border-left:none;
border-bottom:none;
}
.box:after {
bottom:0;
left:0;
border-right:none;
border-top:none;
}
body {
background:#222;
}
<div class="box"> some text here </div>
I have a form as in the below code ? how can i make it fit to the center of the screen and convert it to be responsive ?
HTML5 Code
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS3 Search Form</title>
<link href="css/cbdb-search-form.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">
body {
background: #999;
}
</style>
</head>
<body>
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" />
</form>
</body>
</html>
CSS Code
/************************************
CSS 3 SEARCH BY ZEAOS
************************************/
#search-form {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;
/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}
/*** TEXT BOX ***/
input[type="email"]{
background: #fafafa; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 250px;
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}
/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
outline: none;
background: #fff; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}
/*** SEARCH BUTTON ***/
input[type="submit"]{
background: #44921f;/* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;
/* Rounded Corners */
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
background: #4ea923; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)),
color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
EDIT 1
This is a mobile web application . Users consists of both smart phones and oldest devices.
First at all
Remove HTML DOCTYPE or change it to <!DOCTYPE html>. HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
To center Content
Wrap your form in a DIV
<body>
<div class="modal">
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" />
</form>
</div>
</body>
Then Apply this CSS to center on screen.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#search-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
To be Responsive Use CSS Media Query
Media Queries let you apply styles depending on conditions (screen size, screen type, etc) on the screen where you will see the page.
This is only a simple example. I recommend you read about CSS Media Queries.
In this case you set minimum width and height
#media ( max-width :320px) {
.modal {
min-width: 200px;
min-height: 120px;
}
}
#media ( min-width :321px) {
.modal {
min-width: 300px;
min-height: 220px;
}
}
#media ( min-width :640px) {
.modal {
min-width: 480px;
min-height: 320px;
}
}
#media ( min-width :1200px) {
.modal {
min-width: 700px;
min-height: 400px;
}
}
In the other Hand
Have you thought about using bootstrap?
Enjoy!
First of all for making a responsive form or anything like that always give width in %age followed by giving media queries. You can use bootstrap for making your page even better. you can get bootstrap from getbootstrap.com/. The usage and implementation techniques are mentioned there
To center add position:relative to the body
Then you add these rules to the #form to your css:
#search-form{
margin:auto;
position:absolute;
z-index: 30;
top:0;
bottom:0;
left:0;
right:0;
width: 300px; /*variable*/
height: 300px; /*variable*/
}
To center, add
width: 365px;
height:38px;
position:absolute;
top:50%;
margin-top:-19px;
left:50%;
margin-left:-182px;
in #search-form
for responsive, this could be a starting point:
#media all and (max-width:480px) {
#search-form {
width:100%;
margin-left:-50%;
}
input[type="email"]{
width:70%;
}
input[type="submit"]{
width:20%;
}
}
I was working with this for hours but get no result. What I want to do is displaying these 3 boxes in the center of the page in one line with the same width of spaces between the boxes.
Here is the codes:
#instagram-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
}
#innergram{
padding: 10px;
background: #990000;
}
#instagram-home h2{
text-align: center;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}.classname:active {
position:relative;
top:1px;
}
#pinterest-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
}
#innerpin{
padding: 10px;
background: #990000;
}
#pinterest-home h2{
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}.classname:active {
position:relative;
top:1px;
}
#twitter-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
}
#innertweet{
padding: 10px;
background: #990000;
}
#twitter-home h2{
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}.classname:active {
position:relative;
top:1px;
}
<ul style="display:inline; list-style-type:none;">
<li>
<div id='pinterest-home'>
<div id='innerpin'>
<h2><?php echo get_option('add_the_boxes_to_pages_title'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_explanation'); ?></p>
<center>Order Now</center>
</div>
</div>
</li>
<li>
<div id='twitter-home'>
<div id='innertweet'>
<h2><?php echo get_option('add_the_boxes_to_pages_tweettitle'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_explanationtweet'); ?></p>
<center>Order Now</center>
</div>
</div>
</li>
<li>
<div id='instagram-home'>
<div id='innergram'>
<h2><?php echo get_option('add_the_boxes_to_pages_instatitle'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_instaexplanation'); ?></p>
<center>Order Now</center>
</div>
</div>
</li>
</ul>
Fiddle source: http://jsfiddle.net/eA3hp/
I had tried to fix it using table and finally ul li code, but no result.
Do you know how to achieve what I need?
Thanks
like this? (it's still quite messy but i hope you'll get the idea)
HTML:
<ul class="list-holder">
<li class="home">
<div class='inner'>
<h2>TEST!</h2>
<p>TESTER</p>
<center>Order Now
</center>
</div>
</li>
<li class="home">
<div class='inner'>
<h2>TEST!</h2>
<p>TESTER</p>
<center>Order Now
</center>
</div>
</li>
<li class="home">
<div class='inner'>
<h2>TEST!</h2>
<p>TESTER</p>
<center>Order Now
</center>
</div>
</li>
</ul>
CSS:
.list-holder {
background:#456456;
list-style-type:none;
width:100%;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8));
background:-moz-linear-gradient(center top, #2060bf 5%, #3fb8e8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}
.classname:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf));
background:-moz-linear-gradient(center top, #3fb8e8 5%, #2060bf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}
.classname:active {
position:relative;
top:1px;
}
.home {
border: 1px solid #000;
padding: 10px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
display:inline-block;
}
.inner {
padding: 10px;
background: #990000;
}
.home h2 {
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}
.classname {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8));
background:-moz-linear-gradient(center top, #2060bf 5%, #3fb8e8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
background-color:#2060bf;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #120407;
display:inline-block;
color:#fafafa;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:7px 16px;
text-decoration:none;
text-shadow:1px 1px 7px #4f144f;
}
.classname:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf));
background:-moz-linear-gradient(center top, #3fb8e8 5%, #2060bf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
background-color:#3fb8e8;
}
.classname:active {
position:relative;
top:1px;
}
Fiddle: http://jsfiddle.net/VN3AS/
I have a button which works well with the anchor tag but does not work with the submit input tag. How can i make this work with submit button ?
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.classname:active {
position:relative;
top:1px;
}
When I first started learning about inputs and got to the Submit i thought it crashes and the submit doesn't work. Actually it turned that only the cursor changes. Try to set the button style cursor: pointer.