Use our free hand drawn vector arrows pack to draw attention to buttons or adverts
This tutorial will show you how to add our recently released free hand drawn vector arrows to an existing website. This is a great technique for drawing the attention of your visitors to a specific element on your page, such as a call to action button or a special offer etc.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hand Drawn Arrows</title> <style> .box { background: #f6f6f6; font: bold 2em/2.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; line-height: 9em; border-radius: 30px; text-align: center; vertical-align: middle; width: 400px; height: 300px; margin: 50px auto; } </style> </head> <body> <div class="box target"> Look at me </div> </body> </html>
<div class="box target"> Look at me <div class="arrow"></div> </div>
.target { display: block; position: relative; }
.arrow { position: absolute; background: url(SVG/arrow-13.svg) no-repeat; width: 135px; height: 86px; top: 100px; right: -160px; }I have chosen arrow-13.svg for this example and entered the width and height as 135 and 86 pixels respectively. You can find the width and height values of any arrow by opening the .svg file in a code editor and looking at the viewbox values (in order the values are X, Y, W, H): We can of course round these values to the nearest pixel. And we can also scale the svg if desired by proportionally increasing or decreasing both the width and height values in the CSS. The top and right values decide where the arrow will be positioned in relation to the target element. You will almost definitely need to tweak these unless you are using the demo code. You can also use right and/or bottom values instead. For example to place the arrow on the left instead, replace right: -160px with left: -160px
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
See the Pen yajzaQ by Tony Thomas (@medialoot) on CodePen.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hand Drawn Arrows</title> <style> .box { background: #f6f6f6; font: bold 2em/2.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; line-height: 9em; border-radius: 30px; text-align: center; vertical-align: middle; width: 400px; height: 300px; margin: 50px auto; } .target { display: block; position: relative; } .arrow { position: absolute; background: url(SVG/arrow-13.svg) no-repeat; width: 135px; height: 86px; top: 100px; right: -160px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } </style> </head> <body> <div class="box target"> Look at me <div class="arrow"></div> </div> </body> </html>
Comments