Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 289
  • Last Modified:

CSS3 Traingular Buton

i am trying to create a css3 traingular button with arrow to its right side with a gradient effect, but i am unable to do it, can you guide me please, attached is the image

attached is the image

i want to do the gradient effect on the image same like the image,
Untitled.png
0
Gurpreet Singh Randhawa
Asked:
Gurpreet Singh Randhawa
  • 2
2 Solutions
 
Alexandre SimõesManager / Technology SpecialistCommented:
Triangles are fairly easy to create using a CSS trick...

Here I play with it a bit: http://jsfiddle.net/z9c3n/

<div class="button bg-gradient">
    <span class="button">My button</span>
    <span class="arrow-right"></span>
</div>

.arrow-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 0;
    width: 0;
    display: inline-block;
    border: solid 25px #fff;
    border-left: solid 25px transparent;
}

.button{
    width: 150px;
    height: 40px;
    position: relative;
    padding: 10px 30px 0 10px;
}

.bg-gradient {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

Open in new window

0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Here's a good source for gradients: http://www.colorzilla.com/gradient-editor/
0
 
Nathan RileyFounder/CTOCommented:
Here you are, it creates it for you then you just copy and past the code.

http://cssarrowplease.com/
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
Thanks guys, Awesome
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now