1 :host { 2 display: inline-block; 3 position: relative; 4 border: 0; 5 background: transparent; 6 text-align: center; 7 font: inherit; 8 text-transform: uppercase; 9 outline: none; 10 border-radius: 3px; 11 -webkit-user-select: none; 12 user-select: none; 13 cursor: pointer; 14 } 15 16 :host(.hover:hover) { 17 background: #e4e4e4; 18 } 19 20 :host([raisedButton]) { 21 background: #dfdfdf; 22 } 23 24 :host([raisedButton].hover:hover) { 25 background: #d6d6d6; 26 } 27 28 :host([disabled]) { 29 background: #eaeaea !important; 30 color: #a8a8a8 !important; 31 cursor: auto; 32 } 33 34 #shadow-container { 35 border-radius: inherit; 36 } 37 38 #clip { 39 position: relative; 40 border-radius: inherit; 41 overflow: hidden; 42 } 43 44 /* 45 #focusBg { 46 position: absolute; 47 top: 0; 48 left: 0; 49 bottom: 0; 50 right: 0; 51 opacity: 0; 52 border-radius: inherit; 53 background: #c3c3c3; 54 -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); 55 transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); 56 } 57 58 :host([focused]) #focusBg { 59 -webkit-transition: none; 60 transition: none; 61 -webkit-animation: focus-fade 0.7s infinite alternate; 62 animation: focus-fade 0.7s infinite alternate; 63 } 64 65 @-webkit-keyframes focus-fade { 66 0% { 67 opacity: 1; 68 } 69 100% { 70 opacity: 0; 71 } 72 } 73 74 @keyframes focus-fade { 75 0% { 76 opacity: 1; 77 } 78 100% { 79 opacity: 0; 80 } 81 } 82 */ 83 84 #ripple { 85 position: absolute; 86 top: 0; 87 left: 0; 88 bottom: 0; 89 right: 0; 90 color: #d1d1d1; 91 pointer-events: none; 92 } 93 94 :host([raisedButton]) #ripple { 95 color: #cecece; 96 } 97 98 #ripple::shadow canvas { 99 top: 0; 100 left: 0; 101 } 102 103 #content { 104 /* needed to position the ink behind the content */ 105 position: relative; 106 } 107 108 #icon { 109 margin: 8px; 110 } 111 112 #content > span { 113 display: inline-block; 114 margin: 0.5em; 115 }