Monday, August 1, 2016

Arrow button with vertical gradient background

By Hường Hana 2:30 AM , , , Leave a Comment

I need to make this button:

Button

Usually when I need to make arrow button with gradient and border, I add .button:before element with absolute positioning, using transform: rotate(-45deg) translate(%SOMETHING%); and adding background: linear-gradient(45deg, %COLORS%);. But now I need to make button, arrow angle of which is not right. How can I do it?

2 Answers

Answers 1

You can do it like this :

#trape {    position: absolute;    height: 50px;    color: white;    width: 80px;    border:0;    background-image: linear-gradient(0deg, red, tan);  }    #trape:before {    content: "";    position: absolute;    transform: scaleX(0.6) rotate(45deg);    height: 35px;    width: 35px;    right:-18px;    top:7px;    background-image: linear-gradient(-45deg, red, tan);  }
<button id="trape"></button>

Hope it helps :)

Answers 2

You can design this button using :before selector:

.button {     width: 120px;     height: 50px;        position: relative;     -moz-border-radius:    5px;     -webkit-border-radius: 5px;     border-radius:         5px;     border:1px solid #4d7a9c;      position:relative;     color:white;     font-size:18px;          background: #238fe7; /* Old browsers */    background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */    background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */    background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0 ); /* IE6-9 */    }    .button:before {    content: "";    position: absolute;    transform: scaleX(0.6) rotate(45deg);    height: 38px;    width: 38px;    right:-18px;    top:5px;    border-radius:  5px;    z-index:-1px;        background: #238fe7; /* Old browsers */    background: -moz-linear-gradient(-45deg,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */    background: -webkit-linear-gradient(-45deg,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */    background: linear-gradient(135deg,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  }
<button class="button">Text</button>

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment