Skip to content

Instantly share code, notes, and snippets.

@hughbris

hughbris/call-to-action.html

Last active August 29, 2015 14:21
Show Gist options
  • Save hughbris/8493626bf9f94ad27b9d to your computer and use it in GitHub Desktop.
Save hughbris/8493626bf9f94ad27b9d to your computer and use it in GitHub Desktop.
Download ZIP
Design pattern: call to action button/link (plus sized)
Raw
call-to-action.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> <!-- brah! -->
<head>
<title>Call to do it!</title>
<style type="text/css">
/* <![CDATA[ */
a.call-to-action {
display: inline-block;
background-color: #4b4;
color: #cfc;
border: thin solid #393;
border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
font-weight: bold;
text-align: center;
margin: 1em auto 1em 15%;
text-decoration: none;
-webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
a.call-to-action:hover, a.call-to-action:focus {
background-color: #292;
border-color: #272;
text-decoration: none;
}
a.call-to-action:active {
background-color: #070;
border-color: #050;
text-decoration: none;
}
a.call-to-action.plus {
padding: 0.3em 0.7em;
font-size: larger;
}
/* next line not needed, just added for the demo in case you are that superficial */
/* ***** */ body { font: 14px/1.5 sans-serif; } /* ***** */
/* ]]> */
</style>
</head>
<body>
<p>
<a class="call-to-action plus" href="doit.html" title="Doing it now means getting it done presently">Do it now! &gt;</a>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment