title: Buttons in WordPress Text Widget Won't Function Properly
body: <p>I'm trying to make two buttons to filter a category in a blog and place them in the sidebar of my site. So I put the entire code, style and html into a widget. They are simple links with images and hover.
  But somehow, the buttons appear inside the title bar of the next widget in the sidebar.</p>
  
  <p>Here's the code: </p>
  
  <pre><code>&lt;style&gt;
  a.filtro{
  display:block;
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px ;
  background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-02.png");
  background-size:cover;
  }
  
  a.filtro:hover{
  background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-02.png");
  background-size:cover;
  }
  
  a.filtro2{
  display:block;
  width: 100px;
  height: 100px;
  float: left;
  margin:5px;
  background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-03.png");
  background-size:cover;
  }
  
  
  a.filtro2:hover{
  background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-03.png");
  background-size:cover;
  }
  &lt;/style&gt;
  
  
  &lt;a href="http://www.tk.gvdgvd.net/?cat=25" class="filtro"&gt;&lt;/a&gt;
  
  &lt;a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro2"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I've tried many things in the css but i can't fix it, but still, it is a very weird behavior. 
  I guess the new code is overwriting something in the style.css, but i can't tell what.</p>