- CSS Arrow Down
- Syntax
- How does Arrow Down work in CSS?
- Example #1
- Example #2
- Example #3
- Example #4
- Example #5
- Conclusion
- Recommended Articles
- 63 CSS Arrows
- Table of Contents
- Animated Arrows
- Author
- Links
- Made with
- About a code
- Smooth Arrow Animation
- Author
- Links
- Made with
- About a code
- The Arrow
- Author
- Links
- Made with
- About a code
- Flipping Arrows
- Author
- Links
- Made with
- About the code
- Awesome Arrow Icon
- Author
- Links
- Made with
- About a code
- Dashed Animated Arrow
- Author
- Links
- Made with
- About the code
- Arrow @keyframes Animation
- Author
- Links
- Made with
- About a code
- Arrow Animation Button
- Author
- Links
- Made with
- About the code
- Double Arrow Button
- Author
- Links
- Made with
- About the code
- Arrow animation
- Author
- Links
- Made with
- About the code
- Arrow Animations
- Author
- Links
- Made with
- About the code
- Arrow Hover Effect
- Author
- Links
- Made with
- About the code
- Animated CSS Arrows
- Arrowed Link
- Triple Arrow Animation
- Author
- Links
- Made with
- About the code
- Animated Arrow
- Author
- Links
- Made with
- About the code
- Arrow animations
- Author
- Links
- Made with
- About the code
- Animated Arrow Icon
- Author
- Links
- Made with
- About the code
- Arrow animation
- Author
- Links
- Made with
- About the code
- 3 Arrows Animation
- Arrow Keyframes Animation
- Arrow Icon Animation
- Author
- Links
- Made with
- About a code
- CSS Only Animated Arrow
- Arrows Back To Top
- Author
- Links
- Made with
- About the code
- Simple CSS Arrow
- HTML And CSS ‘Back To Top’ Arrows
- Author
- Links
- Made with
- About the code
- Up Arrow
- Arrow Boxes
- Author
- Links
- Made with
- How TO — CSS Arrows
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Animated Scroll Down Arrow
- Basic Example
- Simple But Elegant
- Faders
- Glowers
- Intuitives
- Reactive
- Conclusion
CSS Arrow Down
The arrows that can be created by using CSS are very simple. Arrows may determine how we access them in an application or website by conducting multiple activities such as “go to next page,” indicating “top or bottom, left or right,” and several others to scroll. In this article, we will use down arrows by using the CSS pseudo-elements & borders, and it’s easy to build various arrow styles that look amazing on mobile and desktop, respectively.
Web development, programming languages, Software testing & others
The CSS arrow-down can be specified by using the respective CSS classes and will be referenced with various types of styles. Therefore, the variety of CSS down arrows we’ve put together to get you started is below.
Syntax
We can write the syntax for the down arrow as shown below:
.down-arrow (name of the class) < width: 0; // width for the element height: 0; // width for the element // other CSS styles >
In the examples section, we use the above format to use down arrows on the HTML page.
How does Arrow Down work in CSS?
The CSS down arrow could be used with the help of CSS animation and transition effects. For instance, we will use the bounce effect, apply the circle to the arrow, style arrow borders, background color, and many more. Below are some examples of CSS Arrow Down:
Example #1
.arrow < border: solid grey; border-width: 0 4px 4px 0; display: inline-block; padding: 5px; >.myarrow Down Arrow Example:
Explanation: In the given example, we define the “marrow” class with a transform property, which enables us to rotate the elements, and it is set to 45 degrees. The “arrow” class also includes CSS styles to display the arrow. Use the above output steps for the rest of the examples.
Example #2
body < background: grey; >.div_center < display: flex; height: 50vh; align-items: center; >.arrow_center < position: relative; border: 3px solid #fff; width: 100px; height: 100px; border-radius: 50%; >span < height: 4px; margin: 2px; width: 30px; background: red; transition: 0.3s ease; >span:first-child < position: absolute; transform: rotate(45deg); left: 25%; bottom: 35%; >span:nth-child(2) < position: absolute; transform: rotate(-45deg); left: 45%; bottom: 35%; >span:nth-child(3) < position: absolute; transform: rotate(45deg); left: 25%; bottom: 55%; >span:nth-child(4) < position: absolute; transform: rotate(-45deg); left: 45%; bottom: 55%; >.arrow_center:hover span:nth-child(1) < transform: rotate(-100deg); >.arrow_center:hover span:nth-child(2) < transform: rotate(100deg); >.arrow_center:hover span:nth-child(3) < transform: rotate(150deg); >.arrow_center:hover span:nth-child(4)
Explanation: The above examples use the transform property to rotate the element. Each element rotates according to the specified rotation values and the other CSS styles.
Example #3
.arro < box-sizing: border-box; height: 5vw; width: 5vw; border-style: solid; border-color: #9DC0F0; border-width: 0px 1px 1px 0px; transform: rotate(45deg); transition: border-width 15ms ease-in-out; >.arro:hover < border-bottom-width: 5px; border-right-width: 5px; >.container Down Arrow Example:
Explanation: In the example, the down arrow is displayed with .arro class and the transform property, which rotates at 45 degrees. It provides the transition effect using the transition property, which occurs when the user hovers over an element. We display the arrow element within the container, as depicted in the image.
Example #4
Down Arrow Example:
Explanation: The example uses the transform property to rotate elements along with the specified styles. The styles arrow is specified in the arrow_down id. We apply the animation CSS property to animate between styles for 5 seconds. The @keyframes rule defines the values for the animating properties at numerous stages of the animation with the keyframe called a slide.
Example #5
body < background: grey; >@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); >> .arrow_circle < width: 50px; height: 50px; border-radius: 50px; border: solid 1px white; position: fixed; left: 20%; >.arrow < margin: 0 auto; margin-top: 10px; width: 30px; height: 30px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size: contain; >.bounce Down Arrow Example:
Explanation: The example uses a bounce property that animates the arrow within 3 seconds. We apply the bounce property to different browsers according to the specified styles. To define the circle for the arrow, you can use the .arrow_circle class and apply the corresponding CSS styles. The bounce is a keyframe name that matches an animation to its keyframe declaration.
Conclusion
So far, we have studied various down arrows that can be easily tailored inside the website or an application. Using the CSS pseudo-elements and borders, we can easily create down arrows that look great on desktops and mobiles. Try building with the above code snippets; you will have better insights on down arrows.
Recommended Articles
We hope that this EDUCBA information on “CSS Arrow Down” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
63 CSS Arrows
Collection of free HTML and CSS arrow code examples from Codepen, GitHub and other resources: animated, back to top, scroll down, simple and for boxes. Update of October 2021. 4 new items.
Table of Contents
Animated Arrows
Author
Links
Made with
About a code
Smooth Arrow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
The Arrow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Flipping Arrows
Flipping arrows made with css-doodle.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Awesome Arrow Icon
Animated awesome arrow icon with JS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Dashed Animated Arrow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Arrow @keyframes Animation
Using checkbox as the basis of the arrow state.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Arrow Animation Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Double Arrow Button
Animate an arrow button on click or hover.
Author
Links
Made with
About the code
Arrow animation
HTML and CSS arrow animation.
Author
Links
Made with
About the code
Arrow Animations
Sliding arrow css animations.
Author
Links
Made with
About the code
Arrow Hover Effect
Pure CSS arrow hover effect.
Author
Links
Made with
About the code
Animated CSS Arrows
Arrowed Link
Arrowed link — circle on hover (cf Google Home website).
Made by Alexandre Jolly
May 21, 2017
Triple Arrow Animation
SVG triple arrow animation.
Made by M-A Lavigne
May 5, 2017
Author
Links
Made with
About the code
Animated Arrow
Author
Links
Made with
About the code
Arrow animations
Some CSS only arrow animations that indicate state changes.
Author
Links
Made with
About the code
Animated Arrow Icon
Author
Links
Made with
About the code
Arrow animation
Author
Links
Made with
About the code
3 Arrows Animation
3 arrows animation with HTML, CSS and image.
Arrow Keyframes Animation
Arrow keyframes animation with HTML and CSS.
Made by Stephen Rodriguez
June 21, 2014
Arrow Icon Animation
Arrow icon animation with HTML and CSS.
Made by Bennett Feely
October 9, 2013
Author
Links
Made with
About a code
CSS Only Animated Arrow
Just example of making arrows only with CSS and animate it with CSS3.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Arrows Back To Top
3 HTML and CSS arrow back to top code examples.
Author
Links
Made with
About the code
Simple CSS Arrow
Simple pure CSS arrow button.
HTML And CSS ‘Back To Top’ Arrows
Animated ‘back to top’ arrows.
Made by EricPorter
June 13, 2017
Author
Links
Made with
About the code
Up Arrow
Animated up arrow button style. Designed to make the action more user friendly for the end user. The text fades away and is replaced with a animation designed to hint at the effect this button will have on the site.
Arrow Boxes
5 HTML and CSS arrow box code examples.
Author
Links
Made with
How TO — CSS Arrows
Right arrow:
Left arrow:
Up arrow:
Down arrow:
Step 2) Add CSS:
Example
.arrow <
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
>
.right transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
>
.left transform: rotate(135deg);
-webkit-transform: rotate(135deg);
>
.up transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
>
.down transform: rotate(45deg);
-webkit-transform: rotate(45deg);
>
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Animated Scroll Down Arrow
There are cases where you want to bring your user’s attention towards what lies below the scroll. A site can have multiple folds of important content. The user’s screen is finite and you don’t want them to leave without scrolling down.
The problem at hand is not communicating to the user about the presence of content below the fold — rather convincing them to scroll and see what the content down there has to offer.
Having an emphasized scroll indicator is a solution. This works deep down to the user’s subconscious, but perhaps that is a discussion for some other forum.
Before we see some examples of attention-catchy down arrows, let’s build the most basic one from scratch.
Basic Example
This is one of the most basic down arrows you can build with plain HTML and CSS.
Let’s animate this arrow to make it look alive and demand the user’s attention.
@keyframes jumpInfinite < 0% < margin-top: 0; >50% < margin-top: 20px; >100% < margin-top: 0; >>
To our .down-arrow class, we add an infinite up and down animation.
This is what our final example looks like:
HTML Code
CSS Code
.down-arrow < position: absolute; top: calc(100vh - 80px); left: calc(50% - 14px); width: 0; height: 30px; border: 2px solid; border-radius: 2px; animation: jumpInfinite 1.5s infinite; >.down-arrow:after < content: " "; position: absolute; top: 12px; left: -10px; width: 16px; height: 16px; border-bottom: 4px solid; border-right: 4px solid; border-radius: 4px; transform: rotateZ(45deg); >@keyframes jumpInfinite < 0% < margin-top: 0; >50% < margin-top: 20px; >100% < margin-top: 0; >>
This is how we can build a simple, but practical, down-arrow calling for scroll-worthy attention. Don’t forget, this is just a very basic example. Leveraging the power of CSS, the look and feel of it can be enhanced greatly.
Let’s take a look at some of the more stylistic and enhanced implementations.
Simple But Elegant
Based on your website theme, you may choose to have simple but elegant scroll arrows. These do not take up much space and are not animation-heavy with any effects that may potentially affect the focus of a user who is aware of the scrolling functionality but doesn’t need to scroll.
Faders
Do you like the fade-in-out effect? These CodePens have got you covered. They demonstrate an effect of styling proportional to the length of scrolled content.
Glowers
Some sites prefer a subtle design, where small but carefully designed and well-presented details can catch the user’s attention. One such elegance is a glowing effect.
Intuitives
Another UX is to present a technically intuitive design. In such scenarios, the design offers a direction that is physically relatable for the user. We depict the facility that we need the user to recognize in a manner that relates to real-life objects.
One such instance is to show a mouse icon with the scroll arrow effect.
Reactive
In most cases, designers may prefer an experience that reacts to the required user action, acknowledging that the communication is complete. One such instance can be a scroll arrow that fades away when you start scrolling, instead of remaining visible for all folds till the end of the content is reached.
Conclusion
There are multiple ways of directing your user’s attention to the content below the fold. Given that it could affect your site’s engagement, you should invest time and energy in building a catchy indicator for the user that compels them to scroll down. While there are many designs that you can use, the key features that every pointer should have can be summarized to:
- It should be in an area visible to the user
- It should have a dynamic feel to stand out and catch the user’s attention. For instance:
- Animation
- Glowing effects
- Enhanced focus (Particles, Lightning, etc)
UnusedCSS helps website owners remove their unused CSS every day. See how much you could save on your website:
You Might Also Be Interested In