Publicado em 25 de mai.

Criar outros botões PHP

Pessoal, boa tarde

Estou fazendo um projeto em que preciso acionar através de 6 botões um determinado sistema. No caso criei um botão ON/OFF, mas quando não consigo criar os outros botões. Gostaria de que pudessem me ajudar a "completar" o código acrescentando os 5 botões restantes. Segue abaixo o código dá pagina em PHP. Desde já, obrigado pela atenção.

<html>
<head>

<link href='[http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'](http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600) rel='stylesheet' type='text/css'>

<style type="text/css">

.onoffswitch {
 position: relative; width: 104px;
 -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
 display: none;
}
.onoffswitch-label {
 display: block; overflow: hidden; cursor: pointer;
 border: 2px solid #1A1A18; border-radius: 43px;
}
.onoffswitch-inner {
 display: block; width: 200%; ;
 -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
 -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {

 display: block; float: left; width: 50%; height: 42px; padding: 0; line-height: 42px;
 font-size: 27px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.onoffswitch-inner:before {

 content: "ON";
 padding-left: 10px;
 background-color: #148727; color: #FFFFFF;
}

.onoffswitch-inner:after {

 content: "OFF";
 padding-right: 10px;
 background-color: #F20909; color: #F5EDED;
 text-align: right;
}
.onoffswitch-switch {
 display: block; width: 15px; margin: 13.5px;
 background: #FFFFFF;
 border: 2px solid #1A1A18; border-radius: 43px;
 position: absolute; top: 0; bottom: 0; right: 58px;
 -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
 -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

 margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {

 right: 0px;
}

</style>

</head>

<body>

 <div class="onoffswitch">
 <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
 <label class="onoffswitch-label" for="myonoffswitch">
 <span class="onoffswitch-inner"></span>
 <span class="onoffswitch-switch"></span>
 </label>
 </div>

</body>

</html>

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<html> <head> <link href='[http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'](http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600) rel='stylesheet' type='text/css'> <style type="text/css"> .onoffswitch { position: relative; width: 104px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #1A1A18; border-radius: 43px; } .onoffswitch-inner { display: block; width: 200%; ; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; }

display: block; float: left; width: 50%; height: 42px; padding: 0; line-height: 42px; font-size: 27px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

content: "OFF"; padding-right: 10px; background-color: #F20909; color: #F5EDED; text-align: right; } .onoffswitch-switch { display: block; width: 15px; margin: 13.5px; background: #FFFFFF; border: 2px solid #1A1A18; border-radius: 43px; position: absolute; top: 0; bottom: 0; right: 58px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; }

right: 0px; } </style> </head> <body> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </body> </html>