|
|
Line 4: |
Line 4: |
| <style > | | <style > |
| | | |
- | ul{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | }
| + | |
- | | + | |
- | li{
| + | |
- | display:inline;
| + | |
- | list-type:none;
| + | |
- | }
| + | |
- | a.glidebutton{
| + | |
- | display: inline-block;
| + | |
- | float: left;
| + | |
- | position: relative;
| + | |
- | color: #4A4A4A; /* default color */
| + | |
- | background: transparent; /* default bg color */
| + | |
- | text-decoration: none;
| + | |
- | font: bold 12px Arial; /* font settings */
| + | |
- | letter-spacing: 1px; /* font settings */
| + | |
- | overflow: hidden;
| + | |
- | height: 18px; /* height of each button */
| + | |
- | text-align: center;
| + | |
- | border-radius: 5px; /* border radius */
| + | |
- | -moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
| + | |
- | -webkit-transition: all 0.3s ease-in-out;
| + | |
- | -o-transition: all 0.3s ease-in-out;
| + | |
- | -ms-transition: all 0.3s ease-in-out;
| + | |
- | transition: all 0.3s ease-in-out;
| + | |
- | }
| + | |
- | a.glidebutton > span:first-child{ /* first span inside button */
| + | |
- | position: relative;
| + | |
- | display: block;
| + | |
- | height: 100%;
| + | |
- | padding: 6px; /* padding of button */
| + | |
- | -moz-box-sizing: border-box;
| + | |
- | box-sizing: border-box;
| + | |
- | -moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
| + | |
- | -webkit-transition: all 0.3s ease-in-out;
| + | |
- | -o-transition: all 0.3s ease-in-out;
| + | |
- | -ms-transition: all 0.3s ease-in-out;
| + | |
- | transition: all 0.3s ease-in-out;
| + | |
- | }
| + | |
- | | + | |
- | a.glidebutton > span:first-child:after{ /* CSS generated content */
| + | |
- | content: attr(data-text); /* Duplicate text of span markup */
| + | |
- | display: block;
| + | |
- | width: 100%;
| + | |
- | height: 100%;
| + | |
- | -moz-box-sizing: border-box;
| + | |
- | box-sizing: border-box;
| + | |
- | padding: inherit;
| + | |
- | position: absolute;
| + | |
- | top:100%;
| + | |
- | left:0;
| + | |
- | }
| + | |
- | | + | |
- | a.glidebutton:hover{
| + | |
- | color: black; /* color of button on hover */
| + | |
- | background: #72cb47; /* bg color of button on hover */
| + | |
- | box-shadow: 0 0 4px green inset;
| + | |
- | }
| + | |
- | | + | |
- | a.glidebutton:hover > span:first-child{
| + | |
- | -moz-transform: translateY(-100%);
| + | |
- | -webkit-transform: translateY(-100%);
| + | |
- | -ms-transform: translateY(-100%);
| + | |
- | -o-transform: translateY(-100%);
| + | |
- | transform: translateY(-100%);
| + | |
- | }
| + | |
| | | |
| div#navigation{ | | div#navigation{ |