html - 需要帮助将 "button"添加到 div 的右侧

Question

这是我所拥有的示例:

<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>

我添加了一些 CSS，基本上将它们变成了可点击的矩形。但现在我想在这些矩形的右侧添加一个“提示”。我希望最终结果类似于此处所做的(但相反):

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

不过，我不一定需要在其中放置 Fontello 图标。我也不需要这些“提示”来跟踪与矩形不同的链接。

如果我可以在每个文本中输入一些文本(即“Go”)，或者插入一个短代码，或者放入一个 html 图标，我会很好。有人可以指出我正确的方向吗？谢谢。

Answer 1

Demo

这是您仅使用 css 的所有要求。

你想要的可以通过使用伪元素 :after 和 :before 来实现(这里是:after在按钮上的文本之后使用您想要的图标)

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);
   }