CODEWITHSUNDEEP
javascripthtmlcss
batuman
batuman

Reputation: 7304

Customized button using css

I have a button and tested here is working. But in my code, I tried a few modifications but nothing works. The image is shown below and can see that button is not shown properly.

My full code is shown below, not sure what is wrong? What could be the problem, tested on JSFiddle works, but doesn't work at my webpage?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<style type="text/css">
#background {background: url(main_background.jpg);}


<!-- Top menu css -->
hr {
    border:none;
    border-top:1px solid #CCCCCC;
    height:1px;
    margin-bottom:25px;
    }

#maintopmenucontainer{
    height:24px;
    background:#000;
    display:block;
    padding:45px 0 0 15px;
    }

#maintopmenu{
    position:relative;
    display:block;
    height:24px;
    font-size:11px;
    font-weight:bold;
    font-family:Arial,Verdana,Helvitica,sans-serif;
    }

#maintopmenu ul{
    margin:0px;
    padding:0;
    list-style-type:none;
    width:auto;
    }

#maintopmenu ul li{
    display:block;
    float:left;
    margin:0 1px 0 0;
    }

#maintopmenu ul li a{
    display:block;
    float:left;
    color:#fff;
    text-decoration:none;
    padding:5px 20px 0 20px;
    height:19px;
    background:transparent url(maintopmenu_bg-OFF.gif) no-repeat top left;
    }

#maintopmenu ul li a:hover{
    color:#fff;
    background:transparent url(maintopmenu_bg-OVER.gif) no-repeat top right;
    }

#maintopmenu ul li a.current,#foxmenu ul li a.current:hover{
    color:#000;
    background:#fff;
    }
<!-- Top menu css -->

<!-- Drop Down Menu -->
fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;

    }
    select {
      width: 150px;

    }
    .overflow {
      height: 200px;
    }
<!-- Drop Down Menu -->

.button {
position: absolute;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
    to(#65a9d7) );
padding: 5px 10px;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
color: white;
font-size: 19px;
font-weight: bold;
font-family: Segoe;
text-decoration: none;
vertical-align: middle;
display: block;
width: 200px;
text-align: center; 
}

</style>
</head>

<body>

<hr />
<div id="maintopmenucontainer">
  <div id="maintopmenu">
    <ul>
      <li><a href="#Landed" class="current"><span>Landed</span></a></li>
      <li><a href="#Landed"><span>Apartment</span></a></li>
      <li><a href="#Condominium"><span>Condominium</span></a></li>
      <li><a href="#Commecial"><span>Commecial</span></a></li>
      <li><a href="#Farm"><span>Farm</span></a></li>

    </ul>
  </div>
</div>


<div id="background">
<form name="Landed"  id="Landed" method="post" >

<br /><br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="divstate" id="divstate" >
      <optgroup label="Divisions" selected="selected">
      <option>Yangon</option>
      <option>2</option>
      <option>3</option>          
      </optgroup>
      <optgroup label="States">
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      </optgroup>
</select>
&nbsp;&nbsp;&nbsp;
<select name="township" id="township" >      
      <option>Yangon</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      </optgroup>
</select>
&nbsp;&nbsp;&nbsp;
<input maxlength="100" type="text" name="min_price" id="min_price" placeholder="Minimum price"/>

&nbsp;&nbsp;&nbsp;
<input maxlength="100" type="text" name="max_price" id="max_price" placeholder="Maximum price"/>

&nbsp;&nbsp;&nbsp;
<a class="button" onclick="searchButtonAction()" id="search" href="#"><span>Search</span></a>
<br /><br /><br />
</form>
</div>

</body>

<script>
$(document).ready(function() {
    $('.menu').dropit();
});
$('#max_price-error').css('display', 'block');
$('#max_price-error').html('Please enter to rent or to sell');
</script>
</html>

enter image description here

Upvotes: 1

Views: 88

Answers (1)

Skodsgn
Skodsgn

Reputation: 981

background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
    to(#65a9d7) );
background: linear-gradient(#3e779d, #65a9d7 );

You have only -webkit- gradient. Add normal one.

Upvotes: 2

Related Questions