How to create arrows with CSS?The arrows can be performed by using CSS is pretty simple. The CSS Arrow can be utilized to create a set. CSS arrows can define how you affect them on a website or request by executing particular actions such as “go to next page,” “top or down, left or right” and several others. Using CSS pseudo-elements and borders, it will be easy to create different styles of arrows that look amazing on both desktop and mobile.
Read Also: Pagination in CSS
The CSS arrows can be used in the following ways:
- Top Arrow
- Down Arrow
- Left Arrow
- Right Arrow
- Animated Arrow
Types of CSS Arrows
Following are the 5 types of arrows in CSS explained below:
How to create arrows with CSS?
| Top Arrow
This is the top arrow example. It can be used in the header section of a website to show scroll down to the page. It’s looking pretty good for better user experience. How to create arrows with CSS?
Read Also: Types Of CSS Selectors.
<div class="btn-top"></div>
<style>
.btn-top {
position: relative;
padding: 5px;
margin: 30px auto;
background: hotpink;
height: 50px;
width: 50px;
border-radius: 50%;}
.btn-top::after{
content: "";
position: absolute;
left: 17px;
z-index: 11;
display: block;
width: 25px;
height: 25px;
border-top: 4px solid #fff;
border-left: 4px solid #fff;}
.btn-top::after {top: 20px;transform: rotate(45deg);}
</style>| Down Arrow
This is the down arrow example. It can be used in the footer section of a website to show the scroll above to the page. It’s looking pretty good for better user experience.
Read Also: Creating a Checkbox Using CSS.
<div class="btn-down"></div>
<style>
.btn-down {
position: relative;
padding: 5px;
margin: 30px auto;
background: hotpink;
height: 50px;
width: 50px;
border-radius: 50%;
}
.btn-down::after {
content: "";
position: absolute;
left: 17px;
z-index: 11;
display: block;
width: 25px;
height: 25px;
border-top: 4px solid #fff;
border-left: 4px solid #fff;
}.btn-down::after {top: 10px;transform: rotate(225deg);}
</style>| Left Arrow
This is the left arrow example. It can be used in the left sidebar section of a website to show some hidden elements from the page. It’s looking pretty good for better user experience. It can be used to change the web color font etc.
Read Also: Shadow effect on text Using CSS.
<div class="btn-left"></div>
<style>
.btn-left {
position: relative;
padding: 5px;
margin: 30px auto;
background: hotpink;
height: 50px;
width: 50px;
border-radius: 50%;
transform: rotate(-90deg);
}
.btn-left::after {
content: "";
position: absolute;
left: 17px;
margin-top: 15px;
z-index: 11;
display: block;
width: 30px;
height: 30px;
border-right: 4px solid #fff;
border-bottom: 4px solid #fff;
transform: rotate(-90deg) translate(15px, 4px);}
.btn-left::after {left: 10px;transform: rotate(225deg);}
</style>| Right Arrow
This is the right arrow example. It can be used for the same left arrow of a website to show some hidden elements from the page. It’s looking perfect good for a better user experience.
Read Also: Font-Style in CSS.
<div class="btn-right"></div>
<style>
.btn-right {
position: relative;
padding: 5px;
margin: 30px auto;
background: hotpink;
height: 50px;
width: 50px;
border-radius: 50%;
}
.btn-right::after {
content: "";
position: absolute;
left: 17px;
margin-top: 10px;
z-index: 11;
display: block;
width: 25px;
height: 25px;
border-left: 4px solid #fff;
border-bottom: 4px solid #fff;
}
.btn-right::after {left: 10px;transform: rotate(225deg);}
</style>| Animated Arrow
<div class="btn-down"></div>
<style>
.btn-down {
position: relative;
padding: 5px;
margin: 30px auto;
background: hotpink;
height: 50px;
width: 50px;
border-radius: 50%;
transition: all 0.2s linear;
}
.btn-down:hover {
transform: translate3d(0, 10px, 0);
}
.btn-down::after {
content: "";
position: absolute;
left: 17px;
z-index: 11;
display: block;
width: 25px;
height: 25p;
border-top: 4px solid #fff;
border-left: 4px solid #fff;
}.btn-down::after {top: 10px;transform: rotate(225deg);}
</style>Conclusion
So great, we have analyzed multiple CSS arrows that can be simply applied inside the website or an application. By utilizing the CSS pseudo-elements and borders, we can quickly create arrows that look great both on desktops and mobiles. Try creating with the above code scraps and you will have sufficient perspicacity on certain arrows.