MAX30 / TopAndDownButtonsEverywhere

  1. TopAndDownButtonsEverywhere
  2. Issues
  3. Thanks: work fine!
Open Close
decembre User

Here's just a css to make the arrows less prominent and normal on hover:

/* ==== FIR - TopAndDownButtonsEverywhere (by MAX30 - OpenUserJS) ==== */

#play_btn_up {
    background: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB+SURBVDhPY1i1atV/amAGahgCMoNhaIGlS5cKAp19BoRBbLJcj2QILDJINwzoAmMgfoclIkBixkS5DI8hMJcRNgxoSBoOl6CnNZBhaVhdBjWE1MSJahjQkA4KEmYH2GUrV66cSYEhYB+AzKBtFiHkQqKiH6Ro1CDCQTWgYQQAs81DU0G/83sAAAAASUVORK5CYII=") no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7);
    position: fixed;
    height: 36px;
    width: 13px;
    top: 63% !important;
    border-radius: 5px 0 0 5px;
    bottom: 53%;
    cursor: pointer;
    z-index: 99;
transition: width ease 0.7s !important;
}
#play_btn_dn {
    background: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACPSURBVDhPY2DAAlatWvUfH8amB6vYqEGEg2pgw4iQ7cTKM6xcuXImsYpxqQOZAQ4woIIOCgzrQAl1oEFpZBiWhitFgwx7R4SBIDXYDYGZDFRgTMAwkCHGhBMRJMxwGUa8ITCbli5dKgg08AySN8+AxIhyCboiJMPIN4Qsm6miiYioxltawvSDYogohYTUAQC80UNTOht/YwAAAABJRU5ErkJggg==") no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7);
    position: fixed;
    width: 13px;
    height: 36px;
    right: 0;
    top: 68% !important;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    z-index: 99;
transition: width ease 0.7s !important;
}
#play_btn_dn:hover ,
#play_btn_up:hover {
    width: 36px !important;
}

/* === END === */
jyp Author 
/* ==== FIR - TopAndDownButtonsEverywhere (by MAX30 - OpenUserJS) ==== */

#play_btn_up {
    background: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB+SURBVDhPY1i1atV/amAGahgCMoNhaIGlS5cKAp19BoRBbLJcj2QILDJINwzoAmMgfoclIkBixkS5DI8hMJcRNgxoSBoOl6CnNZBhaVhdBjWE1MSJahjQkA4KEmYH2GUrV66cSYEhYB+AzKBtFiHkQqKiH6Ro1CDCQTWgYQQAs81DU0G/83sAAAAASUVORK5CYII=") no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7);
    position: fixed;
    height: 36px;
    width: 13px;
    top: 63% !important;
    border-radius: 5px 0 0 5px;
    bottom: 53%;
    cursor: pointer;
    z-index: 99;
transition: width ease 0.7s !important;
}
#play_btn_dn {
    background: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACPSURBVDhPY2DAAlatWvUfH8amB6vYqEGEg2pgw4iQ7cTKM6xcuXImsYpxqQOZAQ4woIIOCgzrQAl1oEFpZBiWhitFgwx7R4SBIDXYDYGZDFRgTMAwkCHGhBMRJMxwGUa8ITCbli5dKgg08AySN8+AxIhyCboiJMPIN4Qsm6miiYioxltawvSDYogohYTUAQC80UNTOht/YwAAAABJRU5ErkJggg==") no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7);
    position: fixed;
    width: 13px;
    height: 36px;
    right: 0;
    top: 68% !important;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    z-index: 99;
transition: width ease 0.7s !important;
}
#play_btn_dn:hover ,
#play_btn_up:hover {
    width: 36px !important;
}

/* === END === */