"
Template:Team:DukeMenu/CSS
From 2014.igem.org
(Difference between revisions)
| Line 15: | Line 15: | ||
display: inline; | display: inline; | ||
} | } | ||
| + | |||
| + | /* Makes the square buttons */ | ||
| + | .sq-button { | ||
| + | display:block; | ||
| + | width:100px; | ||
| + | height:100px; | ||
| + | border:none; | ||
| + | line-height:50px; | ||
| + | color:#f5f5f5; | ||
| + | text-align:center; | ||
| + | text-decoration:none; | ||
| + | opacity: 1; | ||
| + | background: #0736A4; | ||
| + | font-size:16px; | ||
| + | font-weight:bold; | ||
| + | overflow:hidden; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -moz-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
| + | /*margins must be half of the change in size*/ | ||
| + | margin: 5px 5px; | ||
| + | line-height:200%; | ||
| + | } | ||
| + | |||
| + | .sq-menu span { | ||
| + | display: table-cell; | ||
| + | text-align: center; | ||
| + | vertical-align: middle; | ||
| + | } | ||
| + | |||
| + | .sq-menu:hover { | ||
| + | background-color: #0000ff; | ||
| + | opacity: 1; | ||
| + | width: 110px; | ||
| + | height: 110px; | ||
| + | /*margins must be negative half of the change in size*/ | ||
| + | margin: -5px -5px; | ||
| + | /* Glow effect */ | ||
| + | -webkit-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0); | ||
| + | -moz-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0; | ||
| + | box-shadow: 0px 0px 20px rgba(7, 54, 164, 0); | ||
| + | } | ||
| + | |||
</style> | </style> | ||
</head> | </head> | ||
| Line 21: | Line 64: | ||
<body> | <body> | ||
<ul> | <ul> | ||
| - | <li><a href="#home">Home</a></li> | + | <li class="sq-menu"><a href="#home">Home</a></li> |
| - | <li><a href="#news">News</a></li> | + | <li class="sq-menu"><a href="#news">News</a></li> |
| - | <li><a href="#contact">Contact</a></li> | + | <li class="sq-menu"><a href="#contact">Contact</a></li> |
| - | <li><a href="#about">About</a></li> | + | <li class="sq-menu"><a href="#about">About</a></li> |
</ul> | </ul> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 18:59, 24 July 2014
