CODEWITHSUNDEEP
htmlcss
Omar Gonzales
Omar Gonzales

Reputation: 4008

make button background gradient

I'm trying to understand how to make a button's background gradient.

I've googled it, and found some tools, but they're not giving me the results I need. I does not look as elegant as origin.

This is the tool I'm using:

http://www.colorzilla.com/gradient-editor/

I'm replicating the buttons on this page:

https://www.stickermule.com/

Desied result:

enter image description here

What I have:

enter image description here

This is the code the tool suggests:

.btn-muestrasgratis, .btn-muestrasgratis:active, .btn-muestrasgratis:visited {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#febf01+0,d66802+82;Yellow+Flat */
background: #febf01; /* Old browsers */
background: -moz-linear-gradient(top, #febf01 0%, #d66802 82%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #febf01 0%,#d66802 82%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #febf01 0%,#d66802 82%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#d66802',GradientType=0 ); /* IE6-9 */
}

UPDATE 1:

It worked when using a tag, not using button tag.

When using button tag, there is a border at the botton. It's not so smooth as using a tag.

I would prefer to use the button tag.

I don't know if using a tag or button tag is important considering that it will send data to server as a django webapp.

    <div class="btn-group mr-4" role="group" aria-label="First group">
        <button type="button" class="btn btn-comprar btn-xlarge text-white">Comprar</button>

</div>
    <a href="#" class="btn-comprar">Shop now</a>

enter image description here

Upvotes: 0

Views: 3679

Answers (1)

Anuresh VP
Anuresh VP

Reputation: 607

Okay try this using background-image and background-color

a.btn {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
}
<a href="#" class="btn">Shop now</a>

Update Add border:none; 

button.btn {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}
button.btn:focus {
	outline:none;
}
<button class="btn" >Shop now</button>

Upvotes: 1

Related Questions