html - Aqua button in CSS multiple browsers -


i trying create aqua themed button looks great across multiple browsers. new css, please kind.

i have found example on-line looks great in chrome... not show in ie...

below button in chrome...

enter image description here

html:

 <div class="button aqua">                 <div class="glare"></div>                 button label             </div> 

css:

.button{   width: 120px;   height: 24px;   padding: 5px 16px 3px;   -webkit-border-radius: 16px;   -moz-border-radius: 16px;   border: 2px solid #ccc;   position: relative;    /* label */   font-family: lucida sans, helvetica, sans-serif;   font-weight: 800;   color: #fff;   text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;   text-align: center;   vertical-align: middle;   white-space: nowrap;   text-overflow: ellipsis;    overflow: hidden; }  .aqua{   background-color: rgba(60, 132, 198, 0.8);   background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));   border-top-color: #8ba2c1;   border-right-color: #5890bf;   border-bottom-color: #4f93ca;   border-left-color: #768fa5;      -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;   -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* ff 3.5+ */ }  .button .glare {   position: absolute;   top: 0;   left: 5px;   -webkit-border-radius: 8px;   -moz-border-radius: 8px;   height: 1px;   width: 142px;   padding: 8px 0;   background-color: rgba(255, 255, 255, 0.25);   background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0))); } 

you missing css attributes ie browser. add following. sample below.

jsfiddle

border-radius:8px; box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; 

Comments

Popular posts from this blog

java - Could not locate OpenAL library -

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

sorting - opencl Bitonic sort with 64 bits keys -