<style>
    .pagination {
    text-align: center;
}

.pagination a, .pagination .page-disabled {
    display: inline-block;
    border: solid 1px #6a7ddd;
    border-radius: 3px;
    padding: 5px;
    margin: 3px;
}

.pagination a {
    background: #6a7ddd;
    color: white;
    text-decoration: none;
}

.pagination a:hover {
    background: #6a7dff;
    text-decoration: underline;
}

.pagination .page-disabled {
    background: #6a7dcc;
    color: #dddddd
}

.pagination .current-page {
    display: inline-block;
}

.pagination .current-page input {
    width: 50px;
    padding: 5px 7px;
    font-size: inherit;
    border-radius: 5px;
    text-align: center;
    border: solid 1px gray;
}

</style>

<div class="pagination">
    <span class="step-links">
        <a href="?page=1">&laquo; В начало</a>
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}">Назад</a>
        {% else %}
            <span class="page-disabled">Назад</span>
        {% endif %}

        <form class="current-page" method="get">
            <label for="page">
                Страница <input type="text" name="page" id="page" value="{{ page_obj.number }}">
                из {{ page_obj.paginator.num_pages }}.
            </label>
        </form>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">Далее</a>
        {% else %}
            <span class="page-disabled">Далее</span>
        {% endif %}
        <a href="?page={{ page_obj.paginator.num_pages }}">В конец &raquo;</a>
    </span>
</div>