body { background-color: #f5f5f5; padding-left: 80px; } button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: 13px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; margin-top: -20px; text-transform: uppercase; border-radius: 40px; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } button.edit { background-color: rgba(83, 83, 83, 0.8); } button.run{ background: #198cff; } textarea.output { width: 100%; height: 50px; background: rgba(235, 235, 235, 0.8); } .float{ position:fixed; width:60px; height:60px; top:40px; left:20px; /* background-color:#0C9; */ color:#FFF; border-radius:50px; text-align:center; box-shadow: 2px 2px 3px #999; } .adminActions { position: fixed; top:20px; left:15px; } .adminButton { height: 60px; width: 60px; background-color: rgba(67, 83, 143, .8); border-radius: 50%; display: block; color: #fff; text-align: center; position: relative; z-index: 1; } .adminButton i { font-size: 22px; } .adminButtons { position: absolute; width: 100%; /* bottom: 120%; */ bottom: -380%; text-align: center; } .adminButtons a { display: block; width: 45px; height: 45px; border-radius: 50%; text-decoration: none; margin: 10px auto 0; line-height: 1.15; color: #fff; opacity: 0; visibility: hidden; position: relative; box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3); } .adminButtons a:hover { transform: scale(1.05); } .adminButtons a:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .03s, transform .15s ease-in-out;} .adminButtons a:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .025s, transform .15s ease-in-out;} .adminButtons a:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .02s, transform .15s ease-in-out;} .adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .05s, transform .15s ease-in-out;} .adminActions a i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .adminToggle { -webkit-appearance: none; position: absolute; border-radius: 50%; top: 0; left: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; background-color: transparent; border: none; outline: none; z-index: 2; transition: box-shadow .2s ease-in-out; box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3); } .adminToggle:hover { box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3); } .adminToggle:checked ~ .adminButtons a { opacity: 1; visibility: visible; }