Pure CSS Read More Arrow

Developer
Izzy Skye
Size
1,747 Kb
Views
86,989

How do I make an pure css read more arrow?

Animated on hover css only arrow for read mores. What is a pure css read more arrow? How do you make a pure css read more arrow? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Pure CSS Read More Arrow Previews
IQ Test

Pure CSS Read More Arrow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Read More Arrow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="arrow"><div class="arrow-mask"></div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Pure CSS Read More Arrow - Script Codes CSS Codes

* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;}
.arrow {margin:50px;border:4px solid #DADADA;border-radius:100%;width:40px;height:40px;}
.arrow .arrow-mask {position:relative;top:-33px;left:-33px;border:21px solid transparent;}
.arrow .arrow-mask:before {content:'';position:relative;float:left;top:16px;left:28px;width:4px;height:16px;background-color:#DADADA;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transition:all 0.3s;-webkit-transition:all 0.3s;}
.arrow .arrow-mask:after {content:'';position:relative;float:left;top:9px;left:28px;width:4px;height:16px;background-color:#DADADA;transform:rotate(45deg);-webkit-transform:rotate(45deg);transition:all 0.3s;-webkit-transition:all 0.3s;}
.arrow:hover {cursor:pointer;border-color:transparent;border-width:0;}
.arrow:hover .arrow-mask {left:-15px;top:-29px;}
.arrow:hover .arrow-mask:before {background-color:#E0346A;}
.arrow:hover .arrow-mask:after {background-color:#E0346A;}
Pure CSS Read More Arrow - Script Codes
Pure CSS Read More Arrow - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3
Size 1,747 Kb
Views 86,989
Do you need developer help for Pure CSS Read More Arrow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Izzy Skye (zephyr) Script Codes
Name
Pure CSS Arrow Collection
Pure CSS Wordpress Fancyboxes
Animated Chart Cards
Pure CSS Spinning Cube
Pure CSS Social Widget
JQuery Slider
Tab Menus
Mobile Material Menu Style
Pure CSS Inanimate Cube Field
Simple Pure CSS Loader
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!