UPDATE:

Check out this demonstration that utilizes two divs to create an arrow effect using rotation and border-radius:

VIEW DEMO

  .btn{
    cursor:pointer;
    position:relative;
    font-family:'Trebuchet MS', Verdana, Arial, sans-serif;
    display:inline-block;
    padding:3px 0 3px 16px;
    text-align:center;
    height:22px;
    color:#696969;/*#DB7DB4;*/
    text-shadow:0px 1px 1px #fff;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    border:1px solid rgba(220,87,166,0.8);
    box-shadow: 0px 0px 0px 3px rgba(220,87,166, 0.8);

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

  .btn_circle{
    position:relative;
    float:right;
    margin:0px 3px 0 8px;
    display:table;
    width:20px;
    height:21px;
    border:1px solid rgba(255,255,255,0.6);
    border-radius:21px;
    box-shadow: inset 0px 3px 2px rgb(92, 38, 70);
    background: #6b294f; /* Old browsers */
    background: -moz-linear-gradient(top, #6b294f 0%, #BE609E 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b294f), color-stop(99%,#BE609E)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6b294f 0%,#aa6592 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6b294f 0%,#BE609E 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6b294f 0%,#BE609E 99%); /* IE10+ */
    background: linear-gradient(top, #6b294f 0%,#BE609E 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b294f', endColorstr='#aa6592',GradientType=0 ); /* IE6-9 */
  }

  .btn_arr{
    position:absolute;
    right:8px;
    height:3px;
    width:10px;
    background:#d9d9d9;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow:-1px 0px 1px #6F375D;
  }
  .btn_top{
    top:11px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .btn_bot{
    top:16px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

Previous Content:

Take a look at this example showcasing a CSS arrow design:

VIEW DEMO 1

VIEW DEMO 2 (featuring '>')

HTML:

  <div class="circle">
     <div class="arrow"></div>
  </div>

CSS:

.arrow{
    margin:0 auto;  
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #CFC5CD;
}
.circle{
    display:table;
    line-height:30px;
    width:10px;
    height:10px;
    padding:3px 5px 3px 7px;
    border:2px solid #CFC5CD;
    border-radius:21px;
   background: #6b294f; /* Old browsers */
background: -moz-linear-gradient(top, #6b294f 0%, #aa6592 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b294f), color-stop(99%,#aa6592)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6b294f 0%,#aa6592 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6b294f 0%,#aa6592 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6b294f 0%,#aa6592 99%); /* IE10+ */
background: linear-gradient(top, #6b294f 0%,#aa6592 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b294f', endColorstr='#aa6592',GradientType=0 ); /* IE6-9 */
  }

Here is something similar,

Check out this link

All you need is:

<a class="link" href="#">
<span>Link</span>     
</a>

Then, the CSS code looks like this:

.link{
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(148,146,149,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(148,146,149,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(148,146,149,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(148,146,149,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(148,146,149,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(148,146,149,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#949295',GradientType=0 ); /* IE6-9 */
    padding:10px 15px;
    border-radius:10px;
    box-shadow:inset 0 -1px 0 #935E7A;
    border-width: 0px 33px 0px 0px;
    -moz-border-image: url(http://i.imgur.com/Eepyg.png) 0 33 0 33 stretch;
    -webkit-border-image: url(http://i.imgur.com/Eepyg.png) 0 33 0 33 stretch;
    -o-border-image: url(http://i.imgur.com/Eepyg.png) 0 33 0 33 stretch;
    border-image: url(http://i.imgur.com/Eepyg.png) 0 33 0 33 stretch;
}

a{
   text-decoration:none;
    color:#935E7A;
}

This should work across different browsers, but I am not sure about the border-image feature. You could also try @roXon's suggestion by adding a second span and positioning it to the right of the text using an image.

Here is the output:

If you want to customize the arrow's appearance, try experimenting with different fonts and unicode characters.

For example, you can visit this link for a demonstration.

To implement this in your code, use the following markup:

<span></span>

And apply the following CSS styles:

span {
    font-size: 20px;
    display: block;
    border-radius: 4em;
    padding: 1em;
    width: 1em;
    height: 1em;
    color: #fff;
    text-shadow: 0 0 .25em #000;
    background: #60224b;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#60224b), to(#c45e9f));
    background: -webkit-linear-gradient(#60224b, #c45e9f);
    background: -moz-linear-gradient(#60224b, #c45e9f);
    background: -ms-linear-gradient(#60224b, #c45e9f);
    background: -o-linear-gradient(#60224b, #c45e9f);
    background: linear-gradient(#60224b, #c45e9f);
    border: .1em solid #ccc;
}

span:after {
    content: ">";
    font-size: 2.5em;
    position: relative;
    top: -.4em;
    font-weight: 900;
}

Here is a creative suggestion that may need some adjustments based on your specific requirements.

See the demo here

.awesome {
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    color: white;

    background-color: #444444; /* Using Gradients + Compatibility */

    border-radius: 50%; /* Adding Compatibility */
}

You can easily customize colors, sizes, and more to suit your needs.

The > symbol represents a simple and common arrow. However, there are numerous other Unicode arrows available as well. For example, Wikipedia has a list of various Unicode arrows that you can explore. It's important to consider their appearance across different default fonts such as those on Windows (7?).

Absolutely, you can achieve that in CSS3 by utilizing the border-image property.