Skip to content

Instantly share code, notes, and snippets.

@toddysm

toddysm/win-backbutton-style.html

Created March 25, 2013 17:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save toddysm/5238768 to your computer and use it in GitHub Desktop.
Save toddysm/5238768 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Windows 8 Page Control demonstrating how to style the back button.
Raw
win-backbutton-style.html
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
<style type="text/css">
.color-blue-dark {
color: #2b5797;
}
.border-thick-blue-dark {
border-color: #2b5797 !important;
border-style: solid;
border-width: 2px;
}
.win-backbutton:hover, .win-backbutton:hover:active {
background-clip: border-box;
background-color: #eff4ff;
}
</style>
<head>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<button class="win-backbutton color-blue-dark border-thick-blue-dark" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to cleverly_win_cogat7and8!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<p>Content goes here.</p>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment