CodePen Embed - CSS

Live
​x
 
<html>
  <head>
    <title>Linki</title>
    <style>
      a {
        font-size: 23px;
        margin: 10px;
        /* <a> jest elementem liniowym,
           tutaj zmienimy go na blokowy */
        display: block;
      }
​
      a.clear {
        text-decoration: none;
        color: inherit;
      }
​
      a.blok {
        border: 2px solid red;
        border-radius: 30px;
        width: 30%;
        text-align: center;
        background: #ebced2;
      }
​
      a.test {
        /* Ten styl będzie występował zawsze, niezależnie od stanu linku */
        border: 1px solid red;
      }
      a.test:link {
        /* Styl aplikowany na niekliknięty jeszcze link */
        color: blue;
      }
      a.test:visited {
        /* Styl aplikowany na odwiedzony już link */
        color: green;
      }
      a.test:hover {
        /* Styl aplikowany na link w momencie, gdy znajduje się nad nim kursor */
        color: orange;
      }
      a.test:focus {
        /* Styl aplikowany na link przy nawigowaniu po stronie klawiszem Tab */
        color: chocolate;
      }
      a.test:active {
        /* Styl aplikowany na link w momencie wykonywania kliknięcia */
        color: red;
      }
​
      a.button {
        font-family: sans-serif;
        padding: 10px 10px;
        background-color: lightgray;
        width: 350px;
        text-align: center;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      a.button:hover {
        box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
      }
      a.button:active {
        box-shadow: inset 3px 3px 4px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <a href="https://google.pl" target="_blank" rel="noopener noreferrer"
      >Link zewnętrzny, domyślny CSS
    </a>
    <!-- # oznacza pusty link - przydatne podczas pracy nad stroną, gdy nie mamy jeszcze linków -->
    <a href="#">Pusty link</a>
    <a href="#" class="clear"
      >Link wyczyszczony z domyślnych styli (poza właściwością
      <code>cursor</code>)</a
    >
    <a href="#" class="clear blok">
      <h2>Blok HTML będący linkiem</h2>
      <p>Lorem Ipsum tekst</p>
      <p>1000 PLN</p>
    </a>
    <a
      href="https://frontstack.pl"
      target="_blank"
      rel="noopener noreferrer"
      class="clear test"
      >Test różnych stanów</a
    >
    <a href="#" class="clear button">Link może wyglądać jak przycisk</a>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.