需要帮助在div的右侧添加“按钮”

Question

Here's an example of what I have:

<div id="stuff">

<li><a href="about-page" class="about">About Us</a></li>

<li><a href="services-page" class="services">Services</a></li>

</div>

I added some CSS that basically turns them into clickable rectangles. But now I want to add a "tip" to the right side of these rectangles. I want the end result similar to what's being done here (but in reverse):

http://www.dzyngiri.com/buttons-with-icons/

I don't necessarily need to put a Fontello icon in there, however. Nor do I need these "tips" to follow a different link than the rectangles.

If I could just type some text into each one (ie. "Go"), or insert a shortcode, or put in an html icon, I'd be fine. Can someone please point me in the right direction? Thanks.

Answer 1

Demo

Here is all set of requirements you have with only css.

What you want can be achieved by using pseudo elements :after and :before (here :after is used as you want icon after the text on the button)

HTML

<h2>Actions</h2>
<a href="" class="button">Button</a>
<a href="" class="button add">Add</a>
<a href="" class="button edit">Edit</a>
<a href="" class="button delete">Delete</a>
<a href="" class="button save">Save</a>
<a href="" class="button email">Send email</a>

<br><br>

<h2>Miscellaneous</h2>
<a href="" class="button like">Like</a>
<a href="" class="button next">Next</a>
<a href="" class="button star">Favourite</a>
<a href="" class="button spark">Spark</a>
<a href="" class="button play">Play</a>

<br><br>

<h2>Social media buttons</h2>

<a href="http://twitter.com/catalinred" class="button tw">Follow me</a>
<a href="http://www.facebook.com/RedTeamDesign" class="button fb">Become a fan</a>


<h2>Buttons and inputs</h2>

<button class="button">Clean button</button>
<button class="button save">Button with icon</button>
<button class="button" disabled>Disabled button</button>
<button class="button save" disabled>Another disabled button</button>

<br>
<input class="button" type="submit" value="Input submit">
<input class="button" type="button" value="Input button">
<input class="button" type="submit" value="Input submit disabled" disabled>
<input class="button" type="button" value="Input button disabled" disabled>

css

   body {
       margin: 0;
       text-align: center;
   }
   h2 {
       font: bold 1.4em'Lucida sans', 'Trebuchet MS', Tahoma, Arial;
       color: #555;
   }
   .button {
       display: inline-block;
       white-space: nowrap;
       background-color: #ddd;
       background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
       background-image: -webkit-linear-gradient(top, #eee, #ccc);
       background-image: -moz-linear-gradient(top, #eee, #ccc);
       background-image: -ms-linear-gradient(top, #eee, #ccc);
       background-image: -o-linear-gradient(top, #eee, #ccc);
       background-image: linear-gradient(top, #eee, #ccc);
       border: 1px solid #777;
       padding: 0 1.5em;
       margin: 0.5em;
       font: bold 1em/2em Arial, Helvetica;
       text-decoration: none;
       color: #333;
       text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
       -moz-border-radius: .2em;
       -webkit-border-radius: .2em;
       border-radius: .2em;
       -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .3);
       -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .3);
       box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .3);
   }
   .button:hover {
       background-color: #eee;
       background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
       background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
       background-image: -moz-linear-gradient(top, #fafafa, #ddd);
       background-image: -ms-linear-gradient(top, #fafafa, #ddd);
       background-image: -o-linear-gradient(top, #fafafa, #ddd);
       background-image: linear-gradient(top, #fafafa, #ddd);
   }
   .button:active {
       -moz-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;
       -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;
       box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;
       position: relative;
       top: 1px;
   }
   .button:focus {
       outline: 0;
       background: #fafafa;
   }
   .button:after {
       background: #ccc;
       background: rgba(0, 0, 0, .1);
       float: right;
       width: 1em;
       text-align: center;
       font-size: 1.5em;
       margin: 0 -1em 0 1em;
       padding: 0 .2em;
       -moz-box-shadow: -1px 0 0 rgba(0, 0, 0, .5), 2px 0 0 rgba(255, 255, 255, .5);
       -webkit-box-shadow: -1px 0 0 rgba(0, 0, 0, .5), 2px 0 0 rgba(255, 255, 255, .5);
       box-shadow: -1px 0 0 rgba(0, 0, 0, .5), -2px 0 0 rgba(255, 255, 255, .5);
       pointer-events: none;
   }
   /* Buttons and inputs */
   button.button, input.button {
       cursor: pointer;
       overflow: visible;
       /* removes extra side spacing in IE */
   }
   /* removes extra inner spacing in Firefox */
   button::-moz-focus-inner {
       border: 0;
       padding: 0;
   }
   /* If line-height can't be modified, then fix Firefox spacing with padding */
   input::-moz-focus-inner {
       padding: .4em;
   }
   /* The disabled styles */
   .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
       background: #eee;
       color: #aaa;
       border-color: #aaa;
       cursor: default;
       text-shadow: none;
       position: static;
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       box-shadow: none;
   }
   /* Hexadecimal entities for the icons */
   .add:after {
       content:"\271A";
   }
   .edit:after {
       content:"\270E";
   }
   .delete:after {
       content:"\2718";
   }
   .save:after {
       content:"\2714";
   }
   .email:after {
       content:"\2709";
   }
   .like:after {
       content:"\2764";
   }
   .next:after {
       content:"\279C";
   }
   .star:after {
       content:"\2605";
   }
   .spark:after {
       content:"\2737";
   }
   .play:after {
       content:"\25B6";
   }
   /* Social media buttons */
   .tw, .fb, .tw:hover, .fb:hover {
       background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .5)), to(rgba(255, 255, 255, 0)));
       background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
       background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
       background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
       background-image: -o-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
       background-image: linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
   }
   .tw, .tw:focus {
       background-color: #88E1E6;
   }
   .fb, .fb:focus {
       background-color: #3C5A98;
       color: #fff;
       text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
   }
   .tw:hover {
       background-color: #b1f0f3;
   }
   .fb:hover {
       background-color: #879bc3;
   }
   .tw:after {
       content:"t";
       background: #91cfd3;
       background: rgba(0, 0, 0, .1);
       color: #fff;
       font-family: verdana;
       text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
   }
   .fb:after {
       content:"f";
       background: #4467ac;
       background: rgba(0, 0, 0, .1);
       color: #fff;
       text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
   }

Answer 2

Thanks for the quick responses, everyone. I managed to figure something out. I'll just leave it here in case any future visitors need it.

HTML:

<div id="stuff">

<li><a href="about-page" class="about">About Us<i class="icons">[***Font Awesome Shortcode***]</i></a></li>

<li><a href="services-page" class="services">Services<i class="icons">[***Font Awesome Shortcode***]</i></a></li>

</div>

CSS:

.stuff li .icons { 
position: relative; 
background: #242025; 
} 

.stuff li .icons:after { 
right: 100%; 
top: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
border-color: rgba(36, 32, 37, 0); 
border-right-color: #242025; 
border-width: 10px; 
margin-top: -10px; 
}