Tema: boton doble funcion
Ver Mensaje Individual
  #13 (permalink)  
Antiguo 24/02/2016, 04:21
Avatar de jearj
jearj
 
Fecha de Ingreso: julio-2008
Mensajes: 72
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: boton doble funcion
Parte 2 CSS:

Código CSS: 
Ver original
  1. .BotonTiempo{
  2.  position:relative;
  3.  float:center;
  4.  width:70px;
  5.  height:30px;
  6.  border-top:2px solid #555;
  7.  border-left:2px solid #555;
  8.  border-right:2px solid #555;
  9.  border-bottom:2px solid #555;
  10.  text-align:center;
  11.  font-weight:500;
  12.  font-size:12px;
  13.  color:#fff;
  14.  cursor:pointer;
  15.  background-color:#444;
  16.  margin-top:0px;
  17.  margin-bottom:0px;
  18.  margin-left:0px;
  19.  margin-right:0px;
  20.  padding:0px;
  21.  
  22. -webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  23. -moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  24. box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  25.  
  26. -moz-border-radius: 20px; /* Firefox */
  27. -khtml-border-radius: 20px; /* Konkeror, ... */
  28. border-radius: 20px; /* Opera 20.50, IE y CSS3 */
  29. -webkit-border-radius: 20px; /* Safari y Chrome */
  30. }
  31.  
  32. .BotonTiempo:hover{
  33.  background:-moz-linear-gradient(#627EBF);
  34.  color:#000;
  35.  background:#fff;
  36. }
  37.  
  38. .BotonMenos1{
  39.  position:relative;
  40.  width:35px;
  41.  height:35px;
  42.  border-top:2px solid #555;
  43.  border-left:2px solid #555;
  44.  border-right:2px solid #555;
  45.  border-bottom:2px solid #555;
  46.  text-align:center;
  47.  line-height:20px;
  48.  font-weight:700;
  49.  font-size:31px;
  50.  font-face:Board;
  51.  color:#fff;
  52.  cursor:pointer;
  53.  background-color:#991111;
  54.  margin-top:10px;
  55.  margin-bottom:20px;
  56.  margin-left:20px;
  57.  margin-right:20px;
  58.  padding-bottom:30px;
  59.  
  60. -webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  61. -moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  62. box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  63.  
  64. -moz-border-radius: 20px; /* Firefox */
  65. -khtml-border-radius: 20px; /* Konkeror, ... */
  66. border-radius: 20px; /* Opera 20.50, IE y CSS3 */
  67. -webkit-border-radius: 20px; /* Safari y Chrome */
  68. }
  69. .BotonMenos1-1{
  70.  position:relative;
  71.  float:right;
  72.  }
  73.  .BotonMenos1-2{
  74.  position:relative;
  75.  float:left;
  76.  }
  77. .BotonMenos1:hover{
  78.  background:-moz-linear-gradient(#627EBF);
  79.  color:#000;
  80.  background:#fff;
  81. }
  82. .BotonMas1{
  83.  position:relative;
  84.  width:35px;
  85.  height:35px;
  86.  border-top:2px solid #555;
  87.  border-left:2px solid #555;
  88.  border-right:2px solid #555;
  89.  border-bottom:2px solid #555;
  90.  text-align:center;
  91.  line-height:33px;
  92.  font-weight:700;
  93.  font-size:30px;
  94.  font-face:Board;
  95.  color:#fff;
  96.  cursor:pointer;
  97.  background-color:#119911;
  98.  margin-top:10px;
  99.  margin-bottom:20px;
  100.  margin-left:20px;
  101.  margin-right:20px;
  102.  padding:0px;
  103.  
  104. -webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  105. -moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  106. box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  107.  
  108. -moz-border-radius: 20px; /* Firefox */
  109. -khtml-border-radius: 20px; /* Konkeror, ... */
  110. border-radius: 20px; /* Opera 20.50, IE y CSS3 */
  111. -webkit-border-radius: 20px; /* Safari y Chrome */
  112. }
  113. .BotonMas1-1{
  114.  position:relative;
  115.  float:right;
  116. }
  117. .BotonMas1-2{
  118.  position:relative;
  119.  float:left;
  120. }
  121. .BotonMas1:hover{
  122.  background:-moz-linear-gradient(#627EBF);
  123.  color:#000;
  124.  background:#fff;
  125. }
  126.  
  127. .Marcador2{
  128.  position:relative;
  129.  width:95%;max-width:95%;min-width:95%;
  130.  height:240px;max-height:240px;min-height:240px;
  131.  float:right;
  132.  border-top:5px solid #0000ff;
  133.  border-left:5px solid #0000ff;
  134.  border-right:5px solid #0000ff;
  135.  border-bottom:5px solid #0000ff;
  136.  line-height:240px;
  137.  text-align:center;
  138.  font-weight:500;
  139.  font-size:240px;
  140.   font-face:Board;
  141.  color:#ff0000;
  142.  background-color:#000;
  143.  margin-top:0px;
  144.  margin-bottom:0px;
  145.  margin-left:0px;
  146.  margin-right:0px;
  147.  padding:0px;
  148.  
  149. font-family:Stencil; text-transform:uppercase; text-decoration: none;
  150.  
  151. -webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  152. -moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  153. box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  154.  
  155. -moz-border-radius: 7px; /* Firefox */
  156. -khtml-border-radius: 7px; /* Konkeror, ... */
  157. border-radius: 7px; /* Opera 10.50, IE y CSS3 */
  158. -webkit-border-radius: 7px; /* Safari y Chrome */
  159. }
  160.  
  161. .Boton2{
  162.  position:relative;
  163.  float:right;
  164.  width:30px;
  165.  height:30px;
  166.  border-top:2px solid #555;
  167.  border-left:2px solid #555;
  168.  border-right:2px solid #555;
  169.  border-bottom:2px solid #555;
  170.  text-align:center;
  171.  line-height:28px;
  172.  font-weight:700;
  173.  font-size:18px;
  174.  color:#fff;
  175.  cursor:pointer;
  176.  background-color:#314EBF;
  177.  margin-top:0px;
  178.  margin-bottom:0px;
  179.  margin-left:0px;
  180.  margin-right:10px;
  181.  padding:0px;
  182.  
  183. -webkit-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  184. -moz-box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  185. box-shadow: 6px 3px 6px 3px rgba(2,30,50,2);
  186. -moz-border-radius: 20px; /* Firefox */
  187. -khtml-border-radius: 20px; /* Konkeror, ... */
  188. border-radius: 20px; /* Opera 20.50, IE y CSS3 */
  189. -webkit-border-radius: 20px; /* Safari y Chrome */
  190. }
  191.  
  192.  
  193.  
  194. .Boton2:hover{
  195.  background:-moz-linear-gradient(#627EBF);
  196.  color:#000;
  197.  background:#fff;
  198. }
  199.  
  200. .Promedio1{
  201.  position:relative;
  202.  float:left;
  203.  width:95%;
  204.  height:60px;
  205.  border-top:5px solid #0000ff;
  206.  border-left:5px solid #0000ff;
  207.  border-right:5px solid #0000ff;
  208.  border-bottom:5px solid #0000ff;
  209.  text-align:center;
  210.  line-height:45px;
  211.  font-weight:700;
  212.  font-size:31px;
  213.  font-face:Board;
  214.  color:#888;
  215.  background-color:#000;
  216.  margin-top:0px;
  217.  margin-bottom:0px;
  218.  margin-left:0px;
  219.  margin-right:0px;
  220.  padding:0px;
  221.  
  222. font-family:Stencil; text-transform:uppercase; text-decoration: none;
  223.  
  224. -webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  225. -moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  226. box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  227.  
  228. -moz-border-radius: 7px; /* Firefox */
  229. -khtml-border-radius: 7px; /* Konkeror, ... */
  230. border-radius: 7px; /* Opera 10.50, IE y CSS3 */
  231. -webkit-border-radius: 7px; /* Safari y Chrome */
  232. }
  233.  
  234. .Promedio2{
  235.  position:relative;
  236.  float:right;
  237.  width:95%;
  238.  height:60px;
  239.  border-top:5px solid #0000ff;
  240.  border-left:5px solid #0000ff;
  241.  border-right:5px solid #0000ff;
  242.  border-bottom:5px solid #0000ff;
  243.  text-align:center;
  244.  line-height:40px;
  245.  font-weight:700;
  246.  font-size:31px;
  247.  font-face:Board;
  248.  color:#888;
  249.  background-color:#000;
  250.  margin-top:0px;
  251.  margin-bottom:0px;
  252.  margin-left:0px;
  253.  margin-right:0px;
  254.  padding:0px;
  255.  
  256. font-family:Stencil; text-transform:uppercase; text-decoration: none;
  257.  
  258. -webkit-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  259. -moz-box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  260. box-shadow: 10px 5px 10px 5px rgba(2,30,50,2);
  261.  
  262. -moz-border-radius: 7px; /* Firefox */
  263. -khtml-border-radius: 7px; /* Konkeror, ... */
  264. border-radius: 7px; /* Opera 10.50, IE y CSS3 */
  265. -webkit-border-radius: 7px; /* Safari y Chrome */
  266. }
  267.  
  268. #wrapper {
  269.      width:100%;
  270.      height:auto;
  271.      background-color:#000;
  272.  padding-top:10px;
  273.  
  274.  padding-bottom:10px;
  275.  padding-left:10px;
  276.  padding-right:10px;
  277. }
  278. #header {
  279.      height:5px;
  280.      background-color:#000;
  281.       text-align:center;
  282.  font-weight:700;
  283.  font-size:36px;
  284.  font-face:Board;
  285.  color:#dd2222;
  286.  padding-top:0px;
  287.  padding-bottom:0px;
  288.  padding-left:0px;
  289.  padding-right:0px;
  290. }
  291. #column_left {
  292.      float:left;
  293.  line-width:39%;
  294.  width:38%;max-width:38%;min-width:38%;
  295.       height:auto;
  296.      background-color:#000;
  297. }
  298. #column_left2 {
  299.      float:left;
  300.  line-width:98%;
  301.  width:98%;max-width:98%;min-width:98%;
  302.      height:auto;
  303.      background-color:#000;
  304.       padding-left:8px;
  305. }
  306. #column_left3 {
  307.      float:left;
  308.  line-width:98%;
  309.  width:98%;max-width:98%;min-width:98%;
  310.      height:auto;
  311.      background-color:#000;
  312.       padding-left:0px;
  313. }
  314. #column_centro {
  315.      float:left;
  316.  line-width:22%;
  317.  width:22%;max-width:22%;min-width:22%;
  318.      height:auto;
  319.      background-color:#000;
  320.  padding-top:0px;
  321.  padding-bottom:0px;
  322.  padding-left:10px;
  323.  padding-right:0px;
  324. }
  325. #column_right {
  326.      float:right;
  327.  line-width:39%;
  328.  width:38%;max-width:38%;min-width:38%;
  329.      height:auto;
  330.      background-color:#000;
  331. }
  332. #column_right2 {
  333.      float:right;
  334.  line-width:98%;
  335.  width:98%;max-width:98%;min-width:98%;
  336.      height:auto;
  337.      background-color:#000;
  338.      padding-left:10px;
  339.      padding-top:15px;
  340. }
  341. #column_right3 {
  342.      float:right;
  343.  line-width:98%;
  344.  width:98%;max-width:98%;min-width:98%;
  345.      height:auto;
  346.      background-color:#000;
  347.      padding-left:0px;
  348. }
  349.  
  350. #footer {
  351.      height:12px;
  352.      background-color:#000;
  353. }