Home/ Questions/Q 8661981
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T16:37:37+00:00

I’m working on a button with a glossy appearance. The button can have various

  • 0

I’m working on a button with a glossy appearance. The button can have various colors and sizes. This is what i have done so far:

.btn-zen-inverse, .btn-zen-inverse:hover{
    color: white;
    background: 
    url("../img/btn_right.png") no-repeat right 0,
    url("../img/btn_left.png") no-repeat  left 0,
    url("../img/btn_center.png") repeat-x 42px 0;
  background-color: #273032;
  background-size: contain; 
  line-height: 50px;
  margin: 12px 18px 3px 0;
  padding: 0;
  border: 2px solid white !important;
}

The images referenced are alpha transparent. The idea is to set the color based on the background-color attribute. The image has a few other properties aswell, but those are merely estetic.

This ofcorse renders an image that looks like this!
I would like the center-image to be visible only in the central part of the image. As you can see from my css. This only has to work perectly in the latest version of the big 4 browsers.

enter image description here

This is what I would like it to look like:

enter image description here

One suggesion is to do this with background-gradients. If that is possible, I need to define the background position similairly to the way padding/margin works. Is that possible?

The design contains:
2 borders:
one white
one gradiented,
A background gradient.
and a 1px thick vertical gradient at the very top.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is as closer as i can get with CSS only.

    Note that multiple backgrounds are not supported by IE8. Neither is the following code, but at least you don’t need images.

    button preview

    Live demo

    HTML:

    <a class="button dark" href="#"><span>Prova Zenconomy Gratis</span></a>

    CSS:

    .button {
    display:inline-block;
    border:2px solid;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    line-height:40px;
    text-decoration:none;
    font-family:Helvetica,Arial,sans-serif;
    -webkit-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
    -moz-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
    box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
}
.button > span {
    padding:0 40px;
    display:block;
    border:3px solid;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.button.dark {
    border-color:#FFF;
    color:#FFF;
    background:#030303;
}
.button.dark > span {
    border-color:#000;
    -webkit-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
    -moz-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
    box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
}

    There are 2 classes (.button for the layout and .dark for colors and gradient) so that you can have different types of buttons in your page.

    • 0