.class in css not working proplerly how to fix? - html

Question

Basically I made a class called botao for all the icons and buttons and icons or buttons image and put it in all of those elements in the html and then try to made their width and height equal to 10% so that I can see how it was but their sizes didn't change and I don't know why. Basically the css was supposed to change their size to 10% of the height and width of the whole page. What's going on here? How to solve it?
html, body {
margin:0;
min-height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("http://wallpaperask.com/wp-content/uploads/Amazing-1920x1080-HD-wallpaper.jpg");
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
zoom:100%;
}
.botao{
width:10%;
height:10%;
}
/************** TOGGLE BUTTON***********************/
.switch {
position: relative;
display: inline-block;
right:0px;
width: 200px;
height: 34px;
padding:20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .30s;
transition: .30s;
}
.slider:before {
position: absolute;
content: "";
height: 50px;
width: 50px;
left: 10px;
bottom: 10px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(160px);
-ms-transform: translateX(160px);
transform: translateX(160px);
}
/*------ ADDED CSS ---------*/
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 30px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
/*******************************************SHUTDOWN BUTTON********************************/
#BtnTesteLogout{
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
}
#LOGOUT{
position: relative;
}
/*******************************************Split Screen, WIFI, Bluetooth*********************************/
#SSbutton, #WIFIButton, #BlueButton{
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
}
#SplitScreen{
}
#WIFI{
}
#Bluetooth{
}
#SplitScreen button img, #WIFI button img,#Bluetooth button img{
background-color: Transparent;
}
.clockdate-wrapper {
background-color: none;
padding:25px;
max-width:500px;
width:100%;
text-align:center;
border-radius:5px;
margin:0 auto;
height:300px;
position: absolute;
top:40px;
right: 100px;
border-radius: 15%;
}
#clock{
background-color:none;;
font-family: sans-serif;
font-size:100px;
text-shadow:0px 0px 1px #fff;
color:#fff;
}
#clock span {
color:white;
text-shadow:0px 0px 1px black;
font-size:50px;
position:relative;
top:-27px;
left:-10px;
}
#date {
letter-spacing:10px;
font-size:50px;
font-family:arial,sans-serif;
color:#fff;
}
/**************************************************************************WIFI DROPDOWN********************************************************/
/**************************************************************************BLUETTOTH WINDOW****************************************************/
#BlueWindow{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:10px black solid;
z-index: 10000;
}
#BlueWindowheader{
height: 100px;
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
#closeBlue{
width: 75px;
height: 75px;
top:0px;
left:0px;
background-color: none;
position:absolute;
}
#JoanaPTexto{
color:black;
text-align:center;
text-shadow: 3px 2px grey;
font-size:50px;
top: 20px;
position: relative;
}
#DocImgBlue{
width: 400px;
height: 400px;
background-color: none;
padding:40px;
}
#bottomBlue{
background-color:white;
height:1415px;
border-bottom-left-radius:5%;
border-bottom-right-radius:5%;
}
#MariaDoc{
position: absolute;
left:140px;
top:575px;
}
#closeButtonBlue{
width: 75px;
height: 75px;
background-color: none;
padding:5px;
top: 45px;
position: absolute;
right:10px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
}
#doc1{
z-index:10010;
}
/**************************************************************************BLUETOOTH DROPDOWN**************************************************/
#BlueButton{
}
#wrapperB {
color: #ffcccc;
top: 100px;
width: 400px;
}
#dispos{
color:black;
}
a {
text-decoration: none;
color: inherit;
}
nav ul ul {
-webkit-transition: all 500ms ease-in-out 500ms;
-moz-transition: all 500ms ease-in-out 500ms;
-ms-transition: all 500ms ease-in-out 500ms;
-o-transition: all 500ms ease-in-out 500ms;
transition: all 500ms ease-in-out 500ms;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
box-shadow: 0px -100px 500px rgba(0,0,0,0);
}
nav ul li:hover > ul {
-webkit-transition: all 500ms ease-in-out 0ms;
-moz-transition: all 500ms ease-in-out 0ms;
-ms-transition: all 500ms ease-in-out 0ms;
-o-transition: all 500ms ease-in-out 0ms;
transition: all 500ms ease-in-out 0ms;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}
nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
border-radius: 5px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
border-right: 1px solid #890456;
}
nav ul > li:last-of-type {
border-right: none;
border-radius: 0 5px 5px 0;
}
nav ul span li { border-right: 1px solid #890456; }
nav ul li:first-of-type { border-radius: 5px 0 0 5px; }
#mphone:hover>a,#jphone:hover > a { color: #fff; }
#dispos:hover > a {color:none}
nav ul li a {
display: block;
padding: 10px 31px 10px 32px;
}
#wrapperB #mainB #subB {
position: absolute;
top: 400px;
padding: 0;
right: 20px;
width:1000px;
height:400px;
border-radius: 0 0 5px 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */
background: #a7cfdf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a7cfdf 0%, #23538a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a7cfdf 0%,#23538a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a7cfdf 0%,#23538a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#wrapperB #mainB #subB li {
float: none;
position: relative;
border: none;
}
.bottom{
font-size:75px;
}
nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }
nav ul ul li a { padding: 8px 21px; }
/**************************************************************************SS DROPDOWN*************************************/
#SSButton{
}
#wrapperSS {
color: black;
top: 100px;
width: 700px;
}
a {
text-decoration: none;
color: inherit;
}
nav ul ul {
-webkit-transition: all 500ms ease-in-out 500ms;
-moz-transition: all 500ms ease-in-out 500ms;
-ms-transition: all 500ms ease-in-out 500ms;
-o-transition: all 500ms ease-in-out 500ms;
transition: all 500ms ease-in-out 500ms;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
box-shadow: 0px -100px 500px rgba(0,0,0,0);
}
nav ul li:hover > ul {
-webkit-transition: all 500ms ease-in-out 0ms;
-moz-transition: all 500ms ease-in-out 0ms;
-ms-transition: all 500ms ease-in-out 0ms;
-o-transition: all 500ms ease-in-out 0ms;
transition: all 500ms ease-in-out 0ms;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}
nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
border-radius: 5px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
border-right: 1px solid #890456;
}
nav ul > li:last-of-type {
border-right: none;
border-radius: 0 5px 5px 0;
}
nav ul span li { border-right: 1px solid #890456; }
nav ul li:first-of-type { border-radius: 5px 0 0 5px; }
#mergeall:hover>a,#split2:hover > a,#split4:hover > a, #split6:hover > a { color: green; }
nav ul li a {
display: block;
padding: 10px 31px 10px 32px;
}
#wrapperSS #mainSS #subSS {
position: absolute;
top: 400px;
padding: 0;
right: 20px;
width:800px;
height:400px;
border-radius: 0 0 5px 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#wrapperSS #mainSS #subSS li {
float: none;
position: relative;
border: none;
}
.bottom{
font-size:75px;
}
nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }
nav ul ul li a { padding: 8px 21px; }
/********************************************BOTTOM BAR***********************************/
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #contact{
padding:20px;
background: none;
}
/************************************************MAIN************************************/
#net{
position: absolute;
width:3505px;
height:1500px;
left:1500px;
top:550px;
border-radius:10px black solid;
z-index: 000;
}
#janela{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:10px black solid;
z-index: 000;
}
#closeDocs, #closeNet{
width: 75px;
height: 75px;
background-color: none;
padding:5px;
top: 35px;
position: absolute;
right:20px;
}
#docsHeadTexto,#NetTexto{
color:black;
text-align:center;
text-shadow: 3px 2px grey;
font-size:50px;
top: 20px;
position: relative;
}
#netBottom{
background-color:white;
height:2515px;
width: 3500px;
left:-1px;
top:130px;
position: absolute;
border-bottom-left-radius:0%;
border-bottom-right-radius:0%;
}
.windowTop,.windowTop2,.windowTop1{
height: 100px;
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
#DocImg{
width: 400px;
height: 400px;
background-color: none;
padding:40px;
}
#bottomWindowDocs{
background-color:white;
height:1415px;
border-bottom-left-radius:5%;
border-bottom-right-radius:5%;
}
#DocEx{
position: absolute;
left:140px;
top:575px;
}
/****************************************************** CONTACTOS *************************************/
/****************************************************** Calendario ************************************/
#calendar{
position:absolute;
height:3000px;
width:4000px;
top:300px;
left:800px;
}
#janelaCalendario{
z-index:0000;
}
#iconeCal{
}
#janelaCalendarioHeader{
position: absolute;
top:200px;
left:800px;
width:4005px;
}
#closeCal{
position: absolute;
top:10px;
left:3900px;
height: 90px;
width:90px;
}
<!DOCTYPE html>
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="PF1.1.css">
</head>
<body>
<div id="Logout">
<!---<img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png">-->
<button onclick="location.href = 'PF1.html';" id="BtnTesteLogout" class="float-left submit-button" ><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></button>
</div>
<div id="BarraSDireita">
<div id="Bluetooth">
<nav id="wrapperB" class="wrapper">
<ul id="mainB" class="main">
<li id="frontB" class="botao" class="front"><img id ="BlueButton" class="botao" src="https://cdn.pixabay.com/photo/2015/03/12/12/22/bluetooth-670069_960_720.png">
<ul id="subB" class="sub">
<li class="bottom" id="onoff"><a> <label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END--></div></label></a></li>
<li class="bottom" id="dispos"><a>Dispositivos emparelhados:</a></li>
<li class="bottom" id="jphone"><a onclick="abrirBlue()">Joana's Phone</a></li>
<li class="bottom" id="mphone"><a>Maria's Phone</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
<div id="SplitScreen">
<nav id="wrapperSS" class="wrapper">
<ul id="mainSS" class="main">
<li id="frontSS" class="botao" class="front"><img class="botao" id ="SSButton" src="bullet-splitscreen.png">
<ul id="subSS" class="sub">
<li class="bottom" id="mergeall">Juntar todos os ecr&atildes</li>
<li class="bottom" id="split2">Dividir em 2</li>
<li class="bottom" id="split4">Dividir em 4</li>
<li class="bottom" id="split6">Dividir em 6</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="WIFI">
<button id="WIFIButton" class=botao><img class="botao" src="https://purepng.com/public/uploads/large/purepng.com-wifi-icon-redwifi-iconwifiiconwireless-connection-1701528436213ktjmp.png"></button>
</div>
</div>
<div id="BlueWindow" style="display:none;">
<div id="BlueWindowheader">
<header class="windowTop1">
<button id="closeButtonBlue"><img id="closeBlue" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharBlue()"></button>
<h1 id="JoanaPTexto">Joana's Phone</h1>
</header>
</div>
<div id="bottomBlue">
<div id="doc1">
<div id="doc1header">
<img id="DocImgBlue" src="https://img.icons8.com/pastel-glyph/2x/file.png">
</div>
<h1 id="MariaDoc">Doc-exemplo-Joana</h1>
</div>
</div>
</div>
<div id="DOCS">
<img id="documentos_logo" class="botao" src="https://marketplace.canva.com/MAB7OE9Jppw/1/thumbnail_large/canva-folder-file-yellow-document-info-icon.-vector-graphic-MAB7OE9Jppw.png" alt="documentos" onclick="openDocs()">
</div>
<div id="janela">
</div>
<div id="docwindow" style="display: none;">
<div id="docwindowheader">
<header class="windowTop">
<h1 id="docsHeadTexto">Documentos</h1>
<img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
</header>
</div>
<div id="bottomWindowDocs">
<div class="documents">
<div>
<img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc">
<h1 id="DocEx">Doc-exemplo</h1>
</div>
</div>
<!----<div id="DocExemplo" S>
<header class="windowhead">
Documento exemplo
<img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()">
<button id="share">share</button>
<button id="back">back</button>
</header>
<div id="corpo">
<h4>Este é um exemplo de Documento</h4>
</div>
</div>-->
</div>
</div>
<div id="calendario">
<a id="iconeCal" class="botao" onclick="abrirCal()"><img src="https://www.manisteelibrary.org/images/events-calendar.png/##images/image.png"></a>
</div>
<div id="janelaCalendario" style="display:none;">
<div id="janelaCalendarioHeader">
<header class="windowTop">
<img id="closeCal" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharCal()">
</header>
</div>
<iframe src="https://teamup.com/ksbe6drnzpwdbyrgp2" id="calendar"></iframe>
</div>
<div id="net" style=display:none;>
<div id="Netheader">
<header class="windowTop2">
<h1 id="NetTexto">Desk+ Browser</h1>
<img id="closeNet" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharNet()">
</header>
</div>
<div id="netBottom1">
<iframe id="netBottom" src="https://www.bing.com/" id="google"></iframe>
</div>
</div>
<div class="navbar">
<a id="NET" class="botao" onclick="openNet()"><img class="botao" src="NET.png" id="NetImg"></a>
<a onclick="openAdressb()" class="botao"><img class="botao" src="http://download.seaicons.com/icons/paomedia/small-n-flat/1024/address-book-alt-icon.png" id="contact"></a>
</div>
</body>
<script src="PF1.1.js"></script>
</html>
Also some elements of the class .botao are not appearing

Answer 1

Try .botao img{ width:10%; height:10%; }
here is your edited code:
<!DOCTYPE html>
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="PF1.1.css">
</head>
<body>
<div id="Logout">
<!---<img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png">-->
<button onclick="location.href = 'PF1.html';" id="BtnTesteLogout" class="float-left submit-button" ><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></button>
</div>
<div id="BarraSDireita">
<div id="Bluetooth">
<nav id="wrapperB" class="wrapper">
<ul id="mainB" class="main">
<li id="frontB" class="front"><img id ="BlueButton" src="https://cdn.pixabay.com/photo/2015/03/12/12/22/bluetooth-670069_960_720.png">
<ul id="subB" class="sub">
<li class="bottom" id="onoff"><a> <label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END--></div></label></a></li>
<li class="bottom" id="dispos"><a>Dispositivos emparelhados:</a></li>
<li class="bottom" id="jphone"><a onclick="abrirBlue()">Joana's Phone</a></li>
<li class="bottom" id="mphone"><a>Maria's Phone</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
<div id="SplitScreen">
<nav id="wrapperSS" class="wrapper">
<ul id="mainSS" class="main">
<li id="frontSS" class="front"><img id ="SSButton" src="bullet-splitscreen.png">
<ul id="subSS" class="sub">
<li class="bottom" id="mergeall">Juntar todos os ecr&atildes</li>
<li class="bottom" id="split2">Dividir em 2</li>
<li class="bottom" id="split4">Dividir em 4</li>
<li class="bottom" id="split6">Dividir em 6</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="WIFI">
<button id="WIFIButton" class="botao"><img src="https://purepng.com/public/uploads/large/purepng.com-wifi-icon-redwifi-iconwifiiconwireless-connection-1701528436213ktjmp.png"></button>
</div>
</div>
<div id="BlueWindow" style="display:none;">
<div id="BlueWindowheader">
<header class="windowTop1">
<button id="closeButtonBlue"><img id="closeBlue" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharBlue()"></button>
<h1 id="JoanaPTexto">Joana's Phone</h1>
</header>
</div>
<div id="bottomBlue">
<div id="doc1">
<div id="doc1header">
<img id="DocImgBlue" src="https://img.icons8.com/pastel-glyph/2x/file.png">
</div>
<h1 id="MariaDoc">Doc-exemplo-Joana</h1>
</div>
</div>
</div>
<div id="DOCS" class="botao" >
<img id="documentos_logo"src="https://marketplace.canva.com/MAB7OE9Jppw/1/thumbnail_large/canva-folder-file-yellow-document-info-icon.-vector-graphic-MAB7OE9Jppw.png" alt="documentos" onclick="openDocs()">
</div>
<div id="janela">
</div>
<div id="docwindow" style="display: none;">
<div id="docwindowheader">
<header class="windowTop">
<h1 id="docsHeadTexto">Documentos</h1>
<img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
</header>
</div>
<div id="bottomWindowDocs">
<div class="documents">
<div>
<img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc">
<h1 id="DocEx">Doc-exemplo</h1>
</div>
</div>
<!----<div id="DocExemplo" S>
<header class="windowhead">
Documento exemplo
<img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()">
<button id="share">share</button>
<button id="back">back</button>
</header>
<div id="corpo">
<h4>Este é um exemplo de Documento</h4>
</div>
</div>-->
</div>
</div>
<div id="calendario">
<a id="iconeCal" class="botao" onclick="abrirCal()"><img src="https://www.manisteelibrary.org/images/events-calendar.png/##images/image.png"></a>
</div>
<div id="janelaCalendario" style="display:none;">
<div id="janelaCalendarioHeader">
<header class="windowTop">
<img id="closeCal" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharCal()">
</header>
</div>
<iframe src="https://teamup.com/ksbe6drnzpwdbyrgp2" id="calendar"></iframe>
</div>
<div id="net" style=display:none;>
<div id="Netheader">
<header class="windowTop2">
<h1 id="NetTexto">Desk+ Browser</h1>
<img id="closeNet" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharNet()">
</header>
</div>
<div id="netBottom1">
<iframe id="netBottom" src="https://www.bing.com/" id="google"></iframe>
</div>
</div>
<div class="navbar">
<a id="NET" onclick="openNet()" class="botao"><img src="NET.png" id="NetImg"></a>
<a onclick="openAdressb()" class="botao" ><img src="http://download.seaicons.com/icons/paomedia/small-n-flat/1024/address-book-alt-icon.png" id="contact"></a>
</div>
</body>
<script src="PF1.1.js"></script>
</html>

Answer 2

One of the general rules of CSS specificity is that id is more specific than class.
Let's take a line of code from your code:
If you have a look in the element inspector for styles, you can see your botao class's width and height are being overwritten (stroked off) by #BlueButton's width and height.
This is the reason why your image size is not 10% and as a fix to this you can assign BlueButton to the preceding anchor tag (if you don't have any tight dependency on id and element type).