Create Up and Down arrow icons or buttons using pure CSS

Question

I am trying to create below shown "up and down" control buttons using pure CSS and no Background image.

enter image description here

But when I added the CSS for arrows in "li.className:after or li.className:before " the position of main boxes moved.

Here is the Fiddle for the issue I am getting > http://jsfiddle.net/8usFk/

Below is the Code for the same:

HTML

<div class="positionCameras">
    <ul>
        <li title="Move Up" class="cameraLeft" id="cameraUp"></li>
        <li title="Camera" class="cameraIcon"></li>
        <li title="Move Down" class="cameraRight" id="cameraDown"></li>
    </ul>
</div>

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
}
.positionCameras li.cameraLeft:before {
    content:" ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

Let me know if you need any other information.

Please suggest.

You might consider using some character codes for the arrows instead - see: http://stackoverflow.com/questions/2701192/ascii-character-for-up-down-triangle-arrow-to-display-in-html — user319940, Jun 10 '14 at 15:50
A bit of a hack but setting `position: fixed; left: 21px; top: 21px;` in `.positionCameras li.cameraLeft:before` would fix it. — TylerH, Jun 10 '14 at 15:53

G-Cyrillus · Accepted Answer · 2014-06-10T17:31:27.393

If you set pseudo to display:inline-block (or any other values but inline.) you can size it.

Then,

to center it: text-align:center on parent.
To vertical-align it : line-height:20px (25px -5px wich is half of the height of pseudo element) and set : vertical-align:middle to pseudo element:

DEMO

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align:top;/* UPDATE*/
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    text-align:center;/* UPDATE*/
    line-height:20px;/* UPDATE*/
}
.positionCameras li.cameraLeft:before {
    content:"";
    display:inline-block;/* UPDATE*/
    width: 0;
    height: 0;
    vertical-align:middle;/* UPDATE*/
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

score 3 · Answer 2 · answered Jun 10 '14 at 16:15

This option always centers the arrows regardless of size and does not require fixed Value margins

JSfiddle Demo

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top; /* added */

}
.positionCameras li.cameraLeft, 
.positionCameras li.cameraIcon, 
.positionCameras li.cameraRight {
    position: relative; /* added */
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
}

.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraLeft:before,
.positionCameras li.cameraRight:before{
    content:""; 

    /* added for positioning magic */
    position: absolute; 
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);    
    transform: translate(-50%, -50%);  
    /* end added */

    width: 0;
    height: 0;
    border-style: solid;
}

.positionCameras li.cameraLeft:before {
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}

.positionCameras li.cameraRight:before {
    border-width: 10px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

Satwik Nadkarny · Answer 3 · 2014-06-10T15:58:52.217

0

Add

vertical-align:top;

to the CSS applied on the div.

ie. you CSS class should be as such:

.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    vertical-align:top;
}

That will work just fine.

You can see that here: http://jsfiddle.net/rhX87/

UPDATE

Add the following CSS for the image to center properly:

position:relative;
bottom:11px;
left:7px;

in the .positionCameras li.cameraLeft:before class.

This should center the image as you want.

See this here: http://jsfiddle.net/rhX87/1/

Hope this helps!!!

edited Jun 10 '14 at 15:58

answered Jun 10 '14 at 15:46

Satwik Nadkarny

5,086
2
23
41

Thanks! I added "vertical-align:top;" to
tag, the boxes are all aligned now... but The Arrow is still at bottom

UID

Jun 10 '14 at 15:48

Add margin for the arrow. Let me try this and post the code. – Satwik Nadkarny Jun 10 '14 at 15:53

1

See the updated section of the answer. This should solve the image centering issue as well!! – Satwik Nadkarny Jun 10 '14 at 15:59

DreamTeK · Answer 4 · 2017-12-11T08:56:05.117

DEMO

HTML

<div class="positionCameras">
    <ul>
        <li title="Move Up" class="cameraLeft" id="cameraUp"></li>
        <li title="Camera" class="cameraIcon"></li>
        <li title="Move Down" class="cameraRight" id="cameraDown"></li>
    </ul>
</div>

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.positionCameras li.cameraLeft, 
.positionCameras li.cameraIcon, 
.positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    vertical-align:top;
}
.positionCameras li.cameraLeft:before,
.positionCameras li.cameraRight:before{
    padding:5px;
    color:#007bff;
    font-size:16px;
    line-height:25px;
}
.positionCameras li.cameraLeft:before{
    content:"▼";
}
.positionCameras li.cameraRight:before{
    content:"▲";
}
.positionCameras li.cameraIcon:before{
    content:"•";
    padding:5px;
    color:#111;
    font-size:48px;
    line-height:25px;
}

Cool triangle characters! Any rendering issues across different browsers or locales? — Peter, Dec 09 '17 at 22:10
@Peter The browsers handle them fine. You just need to ensure the font used to render them contains the characters. These are quite generic symbols and exist in most fonts. Microsoft recommend Segroe UI. — DreamTeK, Dec 11 '17 at 08:55

score 0 · Answer 5 · answered Jun 10 '14 at 16:07

0

you may also use html character codes and do this as in this Fiddle

answered Jun 10 '14 at 16:07

Green Wizard

3,507
4
18
29

score 0 · Answer 6 · answered May 09 '17 at 17:42

Here's my strictly html version. You will need to add the javascript function "incrementMyNumber()" to handle the onclick events. The key is the negative margin on the divs that contain the arrows. You may need to play with the numbers, but this looks good in IE and Chrome.

<table>
<td>
    <input type="text" id="myNumber" style="width:50px" value="5" />
</td>
<td>
    <table style="border-spacing:0px;margin-left:-2px;width:20px;">
        <tr>
            <td style="border:1px solid black;height:8px;background-color:#dcdcdc;cursor:pointer" onclick="incrementMyNumber(1)">
                <div style="margin:-5px;font-size:8px;">&#x25B2;</div>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid black; height: 8px; background-color: #dcdcdc;cursor:pointer" onclick="incrementMyNumber(-1)">
                <div style="margin:-5px;font-size:8px;">&#x25BC;</div>
            </td>
        </tr>
    </table>
</td>

Create Up and Down arrow icons or buttons using pure CSS

6 Answers6

DEMO

Linked