Home/ Questions/Q 8348155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T07:36:31+00:00

here is design of my button (different backgrounds for example, zoom ~1500% and actual

  • 0

here is design of my button (different backgrounds for example, zoom ~1500% and actual size). how can i do it with single element and some css3, or minimum of additional elements? css guru, anyone?

http://ompldr.org/vZjBudQ/button.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    HTML

    <a href="#" class="button"></a>​

    CSS

    .button {
    position: relative;
    z-index: 1;
    display: block;
    width: 22px;
    height: 22px;
    background: -webkit-linear-gradient(#f5f0ee, #e7ddd7);
    background: -ms-linear-gradient(#f5f0ee, #e7ddd7);
    background: -moz-linear-gradient(#f5f0ee, #e7ddd7);
    background: linear-gradient(#f5f0ee, #e7ddd7);
    border: 1px solid #c0b9b3;
    border-radius: 3px;
    box-shadow: inset 0px 1px #fcfbfb, 0px 1px rgba(0, 0, 0, 0.3);
}

.button:before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: -1;
    padding: 4px;
    width: 22px;
    height: 22px;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: -ms-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: linear-gradient(#f5f0ee, #e7ddd7);
    border-radius: 3px;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.3);
}

    JSFiddle.

    I think the only thing I couldn’t get was the border with gradient.

    • 0