支援訓練 96日目 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>transition1</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
a {
  display: block;
  color:white;
  width: 100px;
  padding: 10px;
  text-align: center;
  background-color: blue;
  text-decoration: none;
  transition-property: background, width;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
  -webkit-transition-property: background, width;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-delay: 0s;
}
a:hover {
  background:red;
  width: 200px;
}
</style>
</head>

<body>
<a href="#">ボタン</a>
</body>
</html>