Pure CSS Arrows

Saturday 08th, Sep, 2018 | #Pure CSS #HTML 5

Curated Collection of free HTML and CSS arrow source code examples: css arrow shape, triangle, line, buttons, animated

CSS Triangle Shapes

We can create simple triangular shapes with css using its border property

#triangle_up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #triangle_down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } #triangle_left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } #triangle_right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

CSS Arrow with mouse hover effect

Preview

HTML

CSS <a class="arrow arrow-left" title="Previous" href="javascript:;"></a> <a class="arrow arrow-right" title="Next" href="javascript:;"></a> .arrow { position: absolute; padding: 3rem; /* Arrow size */ box-shadow: 1px -1px 0 1px plum inset; -webkit-box-shadow: 2px -2px plum inset; border: solid transparent; border-width: 0 0 2rem 2rem; transition: 0.2s; } .arrow:hover { box-shadow: 2px -2px 0 2px orchid inset; -webkit-box-shadow: 4px -4px orchid inset; } .arrow { top:50%;margin:-67px 0 0 -67px;left:35% } a:nth-child(2) { left:65% } .arrow-up { transform:rotate(135deg) } .arrow-right { transform:rotate(225deg) } .arrow-down { transform:rotate(-45deg) } .arrow-left { transform:rotate(45deg) }

Up, Left, Top, Down Red CSS Arrow Line

Fixed Buttom CSS arrow down bouncing

Preview

HTML

CSS <div class="encircle bounce animated">

<div class="arrow">

</div>

</div> @-webkit-keyframes bounce {

0%, 20%, 50%, 80%, 100% {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

40% {

-webkit-transform: translateY(-20px);

-moz-transform: translateY(-20px);

-ms-transform: translateY(-20px);

transform: translateY(-20px);

}

60% {

-webkit-transform: translateY(-10px);

-moz-transform: translateY(-10px);

-ms-transform: translateY(-10px);

transform: translateY(-10px);

}

}

@-moz-keyframes bounce {

0%, 20%, 50%, 80%, 100% {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

40% {

-webkit-transform: translateY(-20px);

-moz-transform: translateY(-20px);

-ms-transform: translateY(-20px);

transform: translateY(-20px);

}

60% {

-webkit-transform: translateY(-10px);

-moz-transform: translateY(-10px);

-ms-transform: translateY(-10px);

transform: translateY(-10px);

}

}

@-ms-keyframes bounce {

0%, 20%, 50%, 80%, 100% {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

40% {

-webkit-transform: translateY(-20px);

-moz-transform: translateY(-20px);

-ms-transform: translateY(-20px);

transform: translateY(-20px);

}

60% {

-webkit-transform: translateY(-10px);

-moz-transform: translateY(-10px);

-ms-transform: translateY(-10px);

transform: translateY(-10px);

}

}

@keyframes bounce {

0%, 20%, 50%, 80%, 100% {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

40% {

-webkit-transform: translateY(-20px);

-moz-transform: translateY(-20px);

-ms-transform: translateY(-20px);

transform: translateY(-20px);

}

60% {

-webkit-transform: translateY(-10px);

-moz-transform: translateY(-10px);

-ms-transform: translateY(-10px);

transform: translateY(-10px);

}

}

body {

background: black;

} .encircle {

width: 60px;

height: 60px;

border-radius: 60px;

border: solid 2px white;

position: fixed;

bottom: 0;

left: 50%;

} .arrow {

margin: 0 auto;

margin-top: 13px;

width: 30px;

height: 30px;

background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);

background-size: contain;

} .bounce {

-webkit-animation: bounce 2s infinite;

-moz-animation: bounce 2s infinite;

-ms-animation: bounce 2s infinite;

animation: bounce 2s infinite;

}



Multiple CSS arrow shapes as ICONS